Xây dựng các tính năng dựa trên AI tạo sinh dựa trên dữ liệu của bạn bằng Firebase Genkit

Xây dựng các tính năng AI tạo sinh dựa trên dữ liệu của bạn bằng Firebase Genkit

Thông tin về lớp học lập trình này

subjectLần cập nhật gần đây nhất: thg 1 9, 2025
account_circleTác giả: Alex Astrum, Peter Friese

1. Trước khi bắt đầu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng Firebase Genkit để tích hợp AI tạo sinh vào ứng dụng của mình. Firebase Genkit là một khung nguồn mở giúp bạn xây dựng, triển khai và giám sát các ứng dụng dựa trên AI sẵn sàng phát hành.

Genkit được thiết kế dành cho nhà phát triển ứng dụng, giúp bạn dễ dàng tích hợp các tính năng AI mạnh mẽ vào ứng dụng của mình bằng các mẫu và mô hình quen thuộc. Công cụ này do nhóm Firebase xây dựng, tận dụng kinh nghiệm của chúng tôi trong việc xây dựng các công cụ được hàng triệu nhà phát triển trên toàn thế giới sử dụng.

Điều kiện tiên quyết

  • Quen thuộc với Firestore, Node.js và TypeScript.

Kiến thức bạn sẽ học được

  • Cách xây dựng ứng dụng thông minh hơn bằng các tính năng tìm kiếm vectơ tương đồng nâng cao của Firestore.
  • Cách triển khai AI tạo sinh trong ứng dụng một cách thực tế bằng Firebase Genkit.
  • Chuẩn bị giải pháp để triển khai và tích hợp.

Bạn cần có

  • Một trình duyệt mà bạn chọn, chẳng hạn như Google Chrome
  • Môi trường phát triển có trình soạn thảo mã và dòng lệnh
  • Tài khoản Google để tạo và quản lý dự án Firebase

2. Xem xét ứng dụng web và dịch vụ đám mây được sử dụng

Trong phần này, bạn sẽ xem lại ứng dụng web mà bạn sẽ xây dựng trong lớp học lập trình này, cũng như tìm hiểu về các dịch vụ đám mây mà bạn sẽ sử dụng.

Ứng dụng web

Trong lớp học lập trình này, bạn sẽ làm việc trong cơ sở mã của một ứng dụng có tên là Compass (La bàn) – một ứng dụng lập kế hoạch kỳ nghỉ. Người dùng có thể chọn một điểm đến, xem các hoạt động tại điểm đến đó và tạo một hành trình cho chuyến đi của họ.

Trong lớp học lập trình này, bạn sẽ triển khai hai tính năng mới nhằm cải thiện mức độ tương tác của người dùng với trang chủ của ứng dụng. Cả hai tính năng này đều được cung cấp bởi AI tạo sinh:

  • Ứng dụng hiện hiển thị danh sách tĩnh các đích đến. Bạn sẽ thay đổi thành phần này để nó trở nên linh động!
  • Bạn sẽ triển khai một hành trình được tự động điền để tăng khả năng giữ chân người dùng.

d54f2043af908fb.png

Các dịch vụ được sử dụng

Trong lớp học lập trình này, bạn sẽ sử dụng nhiều dịch vụ và tính năng của Firebase và Cloud. Hầu hết mã khởi đầu cho các dịch vụ và tính năng này đều được cung cấp cho bạn. Bảng sau đây chứa các dịch vụ mà bạn sẽ sử dụng và lý do sử dụng các dịch vụ đó.

Dịch vụ

Lý do sử dụng

Firebase Genkit

Bạn sử dụng Genkit để đưa AI tạo sinh vào ứng dụng Node.js / Next.js.

Cloud Firestore

Bạn lưu trữ dữ liệu trong Cloud Firestore, sau đó sử dụng dữ liệu này để tìm kiếm vectơ tương đồng.

Vertex AI của Google Cloud

Bạn sử dụng các mô hình nền tảng của Vertex AI (như Gemini) để hỗ trợ các tính năng AI của mình.

Firebase App Hosting

Bạn có thể tuỳ ý sử dụng tính năng Lưu trữ ứng dụng Firebase được tinh giản mới để phân phát ứng dụng web Next.js động (được kết nối với kho lưu trữ GitHub).

3. Thiết lập môi trường phát triển

Xác minh phiên bản Node.js

  1. Trong dòng lệnh, hãy xác minh rằng bạn đã cài đặt Node.js phiên bản 20.0.0 trở lên:
    node -v
  2. Nếu bạn chưa có Node.js phiên bản 20.0.0 trở lên, hãy tải phiên bản LTS mới nhất xuống và cài đặt.

Tải mã nguồn cho lớp học lập trình

Nếu bạn có tài khoản GitHub:

  1. Tạo một kho lưu trữ mới bằng mẫu của chúng tôi tại github.com/FirebaseExtended/codelab-ai-genkit-rag65ef006167d600ab.png
  2. Tạo bản sao cục bộ của kho lưu trữ GitHub của lớp học lập trình mà bạn vừa tạo:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag

Nếu bạn chưa cài đặt git hoặc không muốn tạo kho lưu trữ mới:

Tải kho lưu trữ GitHub xuống dưới dạng tệp zip.

Xem xét cấu trúc thư mục

Trên máy cục bộ, hãy tìm kho lưu trữ được nhân bản và xem lại cấu trúc thư mục:

Thư mục

Nội dung mô tả

load-firestore-data

Công cụ dòng lệnh trợ giúp để nhanh chóng điền sẵn bộ sưu tập Firestore

*tất cả các giá trị khác

Mã ứng dụng web Next.js

Thư mục gốc bao gồm một tệp README.md cung cấp hướng dẫn đơn giản để bắt đầu chạy ứng dụng web. Tuy nhiên, nếu là người mới học, bạn nên hoàn thành lớp học lập trình này (thay vì hướng dẫn nhanh) vì lớp học lập trình này chứa bộ hướng dẫn toàn diện nhất.

Nếu không chắc mình đã áp dụng mã đúng cách theo hướng dẫn trong suốt lớp học lập trình này hay chưa, bạn có thể tìm thấy mã giải pháp trong nhánh git end.

Cài đặt Giao diện dòng lệnh (CLI) của Firebase

  1. Xác minh rằng bạn đã cài đặt Firebase CLI và phiên bản là 13.6 trở lên:
    firebase --version
  2. Nếu bạn đã cài đặt Firebase CLI nhưng không phải phiên bản 13.6 trở lên, hãy cập nhật:
    npm update -g firebase-tools
  3. Nếu bạn chưa cài đặt Giao diện dòng lệnh (CLI) của Firebase, hãy cài đặt:
    npm install -g firebase-tools

Nếu bạn không thể cập nhật hoặc cài đặt Giao diện dòng lệnh (CLI) của Firebase do lỗi quyền, hãy xem tài liệu về npm hoặc sử dụng một tuỳ chọn cài đặt khác.

Đăng nhập vào Firebase

  1. Trong thiết bị đầu cuối, hãy đăng nhập vào Firebase:
    firebase login
    Nếu dòng lệnh cho biết bạn đã đăng nhập vào Firebase, bạn có thể chuyển đến phần Thiết lập dự án Firebase của lớp học lập trình này.
  2. Trong thiết bị đầu cuối, tuỳ thuộc vào việc bạn có muốn Firebase thu thập dữ liệu hay không, hãy nhập Y hoặc N. (bạn có thể dùng một trong hai tuỳ chọn này cho lớp học lập trình này)
  3. Trong trình duyệt, hãy chọn Tài khoản Google của bạn rồi nhấp vào Cho phép.

Cài đặt gcloud CLI của Google Cloud

  1. Cài đặt Giao diện dòng lệnh (CLI) gcloud.
  2. Trong thiết bị đầu cuối, hãy đăng nhập vào Google Cloud:
    gcloud auth login

4. Thiết lập dự án Firebase

Trong phần này, bạn sẽ thiết lập một dự án Firebase và đăng ký một Ứng dụng web Firebase trong dự án đó. Bạn cũng sẽ bật một số dịch vụ mà ứng dụng web mẫu sử dụng sau trong lớp học lập trình này.

Tất cả các bước trong phần này đều được thực hiện trong bảng điều khiển Firebase.

Tạo dự án Firebase

  1. Đăng nhập vào bảng điều khiển Firebase bằng chính Tài khoản Google mà bạn đã sử dụng ở bước trước.
  2. Nhấp vào Tạo dự án, sau đó nhập tên dự án (ví dụ: Compass Codelab).
    Hãy ghi nhớ mã dự án được chỉ định tự động cho dự án Firebase của bạn (hoặc nhấp vào biểu tượng Chỉnh sửa để đặt mã dự án mà bạn muốn). Bạn sẽ cần mã này sau để xác định dự án Firebase trong Firebase CLI. Nếu quên mã nhận dạng, bạn có thể tìm thấy mã nhận dạng đó trong phần Cài đặt dự án.
  3. Nhấp vào Tiếp tục.
  4. Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, sau đó nhấp vào Tiếp tục.
  5. Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy, hãy tắt tuỳ chọn Google Analytics.
  6. Nhấp vào Tạo dự án, đợi dự án được cấp phép, rồi nhấp vào Tiếp tục.

Thêm ứng dụng web vào dự án Firebase

  1. Chuyển đến màn hình Project Overview (Tổng quan về dự án) trong dự án Firebase, sau đó nhấp vào Biểu tượng có dấu mở ngoặc nhọn, dấu gạch chéo và dấu đóng ngoặc nhọn, đại diện cho một ứng dụng web Web.Nút Web ở đầu phần Tổng quan về dự án trong bảng điều khiển Firebase
  2. Trong hộp văn bản Biệt hiệu ứng dụng, hãy nhập một biệt hiệu ứng dụng dễ nhớ, chẳng hạn như My Compass Codelab App. Bạn có thể bỏ đánh dấu hộp đánh dấu để thiết lập Firebase Hosting vì bạn sẽ tuỳ ý thiết lập dịch vụ lưu trữ trong bước cuối cùng của lớp học lập trình này.
    Đăng ký ứng dụng web
  3. Nhấp vào Đăng ký ứng dụng > Tiếp tục đến bảng điều khiển.

Vậy thì tuyệt quá! Giờ đây, bạn đã đăng ký một ứng dụng web trong dự án Firebase mới.

Nâng cấp gói giá Firebase

Để sử dụng Firebase Genkit và Vertex AI (cũng như các dịch vụ đám mây cơ bản của chúng), dự án Firebase của bạn cần sử dụng gói giá trả theo mức sử dụng (Blaze), tức là dự án đó được liên kết với một tài khoản Google Billing.

  • Tài khoản Cloud Billing cần có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
  • Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận khoản tín dụng trị giá 300 USD và tài khoản Cloud Billing dùng thử miễn phí hay không.
  • Nếu bạn tham gia lớp học lập trình này trong một sự kiện, hãy hỏi người tổ chức xem có khoản tín dụng Google Cloud nào không.

Tìm hiểu thêm về mức giá của Vertex AI.

Để nâng cấp dự án lên gói Blaze, hãy làm theo các bước sau:

  1. Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
  2. Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết tài khoản Cloud Billing với dự án của bạn.
    Nếu cần tạo tài khoản Cloud Billing trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất quá trình nâng cấp.

Thiết lập Cloud Firestore

  1. Trong bảng điều khiển bên trái của Firebase, hãy mở rộng mục Bản dựng rồi chọn Cơ sở dữ liệu Firestore.
  2. Nhấp vào Tạo cơ sở dữ liệu.
  3. Đặt Mã nhận dạng cơ sở dữ liệu thành (default).
  4. Chọn một vị trí cho cơ sở dữ liệu, sau đó nhấp vào Tiếp theo.
    Đối với ứng dụng thực tế, bạn nên chọn một vị trí gần với người dùng.
  5. Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
    Đừng phân phối hoặc công khai ứng dụng mà không thêm Quy tắc bảo mật cho cơ sở dữ liệu.
  6. Nhấp vào Tạo.

Bật Vertex AI

Sử dụng CLI gcloud để thiết lập Vertex AI. Đối với tất cả các lệnh trên trang này, hãy nhớ thay thế YOUR_PROJECT_ID bằng mã nhận dạng của dự án Firebase.

  1. Trong thiết bị đầu cuối, hãy đặt dự án mặc định cho Google Cloud SDK:
    gcloud config set project YOUR_PROJECT_ID
  2. Nếu bạn thấy thông báo cảnh báo "CẢNH BÁO: Dự án đang hoạt động của bạn không khớp với dự án hạn mức trong tệp Thông tin xác thực mặc định của ứng dụng trên máy. Điều này có thể dẫn đến các vấn đề về hạn mức không mong muốn", sau đó chạy lệnh sau để đặt dự án hạn mức:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
  3. Bật dịch vụ Vertex AI trong dự án:
    gcloud services enable aiplatform.googleapis.com

5. Thiết lập ứng dụng web

Để chạy ứng dụng web, bạn cần chạy các lệnh trong thiết bị đầu cuối và thêm mã trong trình soạn thảo mã. Đối với tất cả các lệnh trên trang này, hãy nhớ thay thế YOUR_PROJECT_ID bằng mã nhận dạng của dự án Firebase.

Định cấu hình Firebase CLI để nhắm đến dự án của bạn

  1. Trong thiết bị đầu cuối, hãy chuyển đến thư mục gốc của dự án lớp học lập trình.
  2. Để yêu cầu Firebase CLI thực thi tất cả các lệnh đối với dự án Firebase, hãy chạy lệnh sau:
    firebase use YOUR_PROJECT_ID

Nhập dữ liệu mẫu vào Firestore

Để bạn có thể bắt đầu nhanh chóng, lớp học lập trình này sẽ cung cấp cho bạn dữ liệu mẫu được tạo sẵn cho Firestore.

  1. Để cho phép cơ sở mã cục bộ chạy mã thường sử dụng tài khoản dịch vụ, hãy chạy lệnh sau trong dòng lệnh:
    gcloud auth application-default login
    Thao tác này sẽ mở một thẻ mới trong trình duyệt. Đăng nhập bằng chính Tài khoản Google mà bạn đã sử dụng trong các bước trước.
  2. Để nhập dữ liệu Firestore mẫu, hãy chạy các lệnh sau:
    cd load-firestore-data
    npm ci
    node index.js YOUR_PROJECT_ID
    cd ..
  3. Xác minh rằng dữ liệu đã được thêm thành công vào cơ sở dữ liệu bằng cách chuyển đến phần Firestore của dự án Firebase trong bảng điều khiển Firebase.Bạn sẽ thấy giản đồ dữ liệu đã nhập và nội dung của giản đồ đó.Dữ liệu mẫu của la bàn trong bảng điều khiển Firebase

Kết nối ứng dụng web với dự án Firebase

Bạn cần liên kết cơ sở mã của ứng dụng web với đúng dự án Firebase để sử dụng các dịch vụ của dự án đó, chẳng hạn như cơ sở dữ liệu. Để thực hiện việc này, bạn cần thêm cấu hình Firebase vào cơ sở mã của ứng dụng. Cấu hình này bao gồm các giá trị thiết yếu như mã dự án, khoá API và mã ứng dụng của ứng dụng, cũng như các giá trị khác cho phép ứng dụng tương tác với Firebase.

  1. Lấy cấu hình Firebase của ứng dụng:
    1. Trong bảng điều khiển của Firebase, hãy chuyển đến dự án Firebase của bạn.
    2. Trong bảng điều khiển ở bên trái, hãy nhấp vào biểu tượng bánh răng bên cạnh mục Tổng quan về dự án rồi chọn Cài đặt dự án.
    3. Trong thẻ "Ứng dụng của bạn", hãy chọn ứng dụng web của bạn.
    4. Trong phần "Thiết lập và cấu hình SDK", hãy chọn tuỳ chọn Cấu hình.
    5. Sao chép đoạn mã. Mã này bắt đầu bằng const firebaseConfig ....
  2. Thêm cấu hình Firebase vào cơ sở mã của ứng dụng web:
    1. Trong trình soạn thảo mã, hãy mở tệp src/lib/genkit/genkit.config.ts.
    2. Thay thế phần có liên quan bằng mã bạn đã sao chép.
    3. Lưu tệp.

Xem trước ứng dụng web trong trình duyệt

  1. Trong dòng lệnh, hãy cài đặt các phần phụ thuộc rồi chạy ứng dụng web:
    npm install
    npm run dev:next
  2. Trong trình duyệt, hãy chuyển đến URL lưu trữ được lưu trữ cục bộ để xem ứng dụng web. Ví dụ: trong hầu hết các trường hợp, URL là http://localhost:3000/ hoặc tương tự.

Màn hình chính của ứng dụng Compass

Compass là một ứng dụng Next.js sử dụng Thành phần máy chủ React và đây là trang chủ.

Nhấp vào Tìm chuyến đi trong mơ của tôi. Bạn có thể thấy rằng trang này hiện hiển thị một số dữ liệu được mã hoá cứng cho một số đích đến cố định:

Tìm màn hình Hành trình trong mơ

Bạn có thể tự do khám phá. Khi bạn đã sẵn sàng tiếp tục, hãy nhấp vào nút trang chủ Màn hình chính (ở góc trên cùng bên phải).

6. Tìm hiểu về AI tạo sinh bằng Genkit

Giờ đây, bạn đã sẵn sàng khai thác sức mạnh của AI tạo sinh trong ứng dụng của mình! Phần này của lớp học lập trình sẽ hướng dẫn bạn cách triển khai một tính năng đề xuất điểm đến dựa trên cảm hứng do người dùng cung cấp. Bạn sẽ sử dụng Firebase Genkit và Vertex AI của Google Cloud làm nhà cung cấp cho mô hình tạo sinh (bạn sẽ sử dụng Gemini).

Genkit có thể lưu trữ dấu vết và trạng thái luồng (cho phép bạn kiểm tra kết quả của việc thực thi các luồng Genkit). Trong lớp học lập trình này, bạn sẽ sử dụng Firestore để lưu trữ các dấu vết này.

Ở bước cuối cùng của lớp học lập trình này, bạn sẽ triển khai ứng dụng Genkit lên Firebase App Hosting.

Kết nối ứng dụng Genkit với dự án Firebase

Chúng ta đã kết nối Genkit với dự án của bạn bằng cách chỉnh sửa src/lib/genkit/genkit.config.ts ở bước trước.

Chạy giao diện người dùng dành cho nhà phát triển Genkit

Genkit đi kèm với giao diện người dùng dựa trên web cho phép bạn tương tác với LLM, luồng Genkit, trình truy xuất và các thành phần AI khác.

Trong dòng lệnh, hãy chạy:

npm run dev:genkit

Trong trình duyệt, hãy chuyển đến URL Genkit được lưu trữ cục bộ. Trong hầu hết các trường hợp, URL này là http://localhost:4000/.

Tương tác với Gemini

Giờ đây, bạn có thể sử dụng Giao diện người dùng dành cho nhà phát triển của Genkit để tương tác với bất kỳ mô hình nào được hỗ trợ hoặc bất kỳ thành phần AI nào khác, chẳng hạn như lời nhắc, trình truy xuất và luồng Genkit.

Ví dụ: hãy thử yêu cầu Gemini đề xuất một kỳ nghỉ lễ. Hãy lưu ý cách bạn có thể sử dụng hướng dẫn hệ thống để điều hướng hành vi của mô hình dựa trên nhu cầu cụ thể của mình. Điều này cũng áp dụng cho các mô hình không hỗ trợ sẵn hướng dẫn hệ thống.

Tương tác với mô hình Gemini trong giao diện người dùng dành cho nhà phát triển Genkit

Quản lý lời nhắc

Firebase Genkit giới thiệu Dotprompt, một trình bổ trợ và định dạng văn bản được thiết kế để đơn giản hoá việc tạo và quản lý các câu lệnh AI tạo sinh. Ý tưởng cốt lõi đằng sau Dotprompt là coi các câu lệnh nhắc là mã, cho phép bạn viết, duy trì và kiểm soát phiên bản cùng với mã ứng dụng.

Để sử dụng Dotprompt, hãy bắt đầu bằng một hello-world:

  1. Trong trình soạn thảo mã, hãy mở tệp prompts/1-hello-world.prompt.
  2. Trong giao diện người dùng dành cho nhà phát triển Genkit, hãy mở prompts/1-hello-world.
  3. Sử dụng bất kỳ tên hoặc mã ngôn ngữ nào mà bạn quen thuộc hoặc để trống.
  4. Nhấp vào Run (Chạy).Sử dụng Dotprompt để tạo lời chào bằng tiếng Thuỵ Điển
  5. Hãy thử một vài giá trị khác nhau. Mô hình ngôn ngữ lớn rất giỏi trong việc hiểu các câu lệnh viết tắt, sai chính tả hoặc chưa hoàn chỉnh trong các cụm từ tìm kiếm đơn giản như thế này.

Làm phong phú kết quả bằng dữ liệu có cấu trúc

Ngoài việc tạo văn bản thuần tuý, Genkit còn giúp bạn định cấu trúc đầu ra để cải thiện khả năng trình bày và tích hợp trong giao diện người dùng của ứng dụng. Bằng cách xác định giản đồ, bạn có thể hướng dẫn LLM tạo dữ liệu có cấu trúc phù hợp với định dạng mà bạn muốn.

Khám phá giản đồ đầu ra

Bạn cũng có thể chỉ định giản đồ đầu ra của lệnh gọi LLM.

  1. Trong trình soạn thảo mã, hãy kiểm tra tệp lời nhắc:
    1. Mở tệp prompts/2-simple-itinerary.prompt.
    2. Kiểm tra giản đồ đầu vào và đầu ra đã xác định.
  2. Tương tác với giao diện người dùng:
    1. Trong giao diện người dùng dành cho nhà phát triển Genkit, hãy chuyển đến phần prompts/2-simple-itinerary.
    2. Cung cấp dữ liệu đầu vào bằng cách điền dữ liệu mẫu vào các trường placeinterests:
      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
    3. Nhấp vào Chạy.

Sử dụng Dotprompt để chỉ định giản đồ đầu ra

Tìm hiểu về đầu ra do giản đồ điều khiển

Hãy lưu ý cách đầu ra được tạo tuân thủ giản đồ đã xác định. Bằng cách chỉ định cấu trúc mong muốn, bạn đã hướng dẫn LLM tạo ra dữ liệu dễ dàng được phân tích cú pháp và tích hợp vào ứng dụng của bạn. Genkit tự động xác thực đầu ra dựa trên giản đồ, đảm bảo tính toàn vẹn của dữ liệu.

Hơn nữa, bạn có thể định cấu hình Genkit để thử lại hoặc cố gắng sửa lỗi đầu ra nếu đầu ra không khớp với giản đồ.

Các ưu điểm chính của giản đồ đầu ra

  • Tích hợp đơn giản: Dễ dàng kết hợp dữ liệu có cấu trúc vào các thành phần trên giao diện người dùng của ứng dụng.
  • Xác thực dữ liệu: Đảm bảo tính chính xác và tính nhất quán của kết quả được tạo.
  • Xử lý lỗi: Triển khai các cơ chế để giải quyết sự không khớp giản đồ.

Việc tận dụng giản đồ đầu ra sẽ nâng cao trải nghiệm của bạn với Genkit, cho phép bạn tạo dữ liệu có cấu trúc, phù hợp để mang lại trải nghiệm phong phú và linh động hơn cho người dùng.

Sử dụng phương thức nhập đa phương thức

Hãy tưởng tượng ứng dụng của bạn đề xuất các điểm đến nghỉ dưỡng dành riêng cho người dùng dựa trên những hình ảnh mà họ thấy cảm hứng. Genkit, kết hợp với mô hình tạo sinh đa phương thức, giúp bạn hiện thực hoá tầm nhìn này.

  1. Trong trình soạn thảo mã, hãy kiểm tra tệp lời nhắc:
    1. Mở tệp prompts/imgDescription.prompt.
    2. Lưu ý việc đưa {{media url=this}} vào, đây là một phần tử cú pháp Handlebars giúp tích hợp hình ảnh vào câu lệnh của bạn.
  2. Tương tác với giao diện người dùng:
    1. Trong Giao diện người dùng dành cho nhà phát triển Genkit, hãy mở lời nhắc prompts/imgDescription.
    2. Nhập URL hình ảnh trong trường imageUrls bằng cách dán URL của hình ảnh. Ví dụ: bạn có thể sử dụng hình thu nhỏ từ Wikipedia về Tháp 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. Nhấp vào Chạy.

7. Triển khai tính năng truy xuất bằng tính năng tìm kiếm vectơ tương đồng

Mặc dù việc tạo nội dung sáng tạo bằng các mô hình AI rất ấn tượng, nhưng các ứng dụng thực tế thường yêu cầu kết quả phải dựa trên một ngữ cảnh cụ thể.

Trong lớp học lập trình này, bạn có một cơ sở dữ liệu về các điểm đến (địa điểm và hoạt động) và mục tiêu là đảm bảo rằng các đề xuất được tạo bởi mô hình Gemini chỉ tham chiếu đến các mục trong cơ sở dữ liệu này.

Để thu hẹp khoảng cách giữa cụm từ tìm kiếm không có cấu trúc và nội dung có liên quan, bạn sẽ khai thác sức mạnh của tính năng tìm kiếm theo độ tương đồng vectơ trên các nội dung nhúng được tạo.

Tìm hiểu về nội dung nhúng và mức độ tương đồng của vectơ

  • Vectơ: Vectơ là đại diện dạng số của các điểm dữ liệu, thường được dùng để mô hình hoá thông tin phức tạp như văn bản hoặc hình ảnh. Mỗi phương diện trong một vectơ tương ứng với một đặc điểm cụ thể của dữ liệu.
  • Mô hình nhúng: Các mô hình AI chuyên biệt này biến đổi dữ liệu đầu vào, chẳng hạn như văn bản, thành vectơ có nhiều chiều. Điều thú vị là các dữ liệu đầu vào tương tự được liên kết với các vectơ gần nhau trong không gian nhiều chiều này.
  • Tìm kiếm theo độ tương đồng vectơ: Kỹ thuật này tận dụng khoảng cách của các vectơ nhúng để xác định các điểm dữ liệu có liên quan. Khi có một truy vấn đầu vào, mô hình này sẽ tìm các mục trong cơ sở dữ liệu có vectơ nhúng tương tự, cho biết mức độ liên quan về ngữ nghĩa.

Tìm hiểu cách hoạt động của quy trình truy xuất

  1. Nhúng truy vấn: Dữ liệu đầu vào của người dùng (ví dụ: "bữa tối lãng mạn ở Paris") được truyền qua một mô hình nhúng, tạo ra một vectơ truy vấn.
  2. Nội dung nhúng cơ sở dữ liệu: Tốt nhất là bạn đã xử lý trước cơ sở dữ liệu đích, tạo vectơ nhúng cho mỗi mục nhập.
  3. Tính toán mức độ tương đồng: Vectơ truy vấn được so sánh với từng vectơ nhúng trong cơ sở dữ liệu bằng cách sử dụng một chỉ số tương đồng (ví dụ: tương đồng cosine).
  4. Truy xuất: Các mục tương tự nhất trong cơ sở dữ liệu, dựa trên khoảng cách của các mục đó với vectơ truy vấn, được truy xuất dưới dạng đề xuất có liên quan.

Bằng cách kết hợp cơ chế truy xuất này vào ứng dụng, bạn có thể tận dụng mô hình Gemini để tạo ra các đề xuất không chỉ sáng tạo mà còn dựa trên tập dữ liệu cụ thể của bạn. Phương pháp này đảm bảo rằng kết quả được tạo vẫn phù hợp theo ngữ cảnh và phù hợp với thông tin có trong cơ sở dữ liệu của bạn.

Bật tính năng tìm kiếm vectơ theo mức độ tương đồng trong Firestore

Ở bước trước của lớp học lập trình này, bạn đã điền sẵn các địa điểm và hoạt động mẫu vào cơ sở dữ liệu Firestore. Mỗi mục nhập địa điểm bao gồm một trường văn bản knownFor mô tả các thuộc tính đáng chú ý của địa điểm đó, cùng với một trường embedding tương ứng chứa vectơ biểu thị nội dung mô tả này.

Để tận dụng sức mạnh của tính năng tìm kiếm theo độ tương đồng vectơ trên các nội dung nhúng này, bạn cần tạo một chỉ mục Firestore. Chỉ mục này cho phép truy xuất hiệu quả các địa điểm dựa trên mức độ tương đồng của vectơ nhúng với một cụm từ tìm kiếm nhất định.

  1. Trong dòng lệnh, hãy chạy lệnh sau để cài đặt thành phần alpha mới nhất. Bạn cần phiên bản 2024.05.03 trở lên:
    gcloud components install alpha
  2. Tạo chỉ mục, nhớ thay thế YOUR_PROJECT_ID bằng mã nhận dạng của dự án.
    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": "{}"}'
  3. Trong Giao diện người dùng dành cho nhà phát triển Genkit, hãy mở retrievers/placesRetriever.
  4. Nhấp vào Chạy. Quan sát đối tượng được tạo sẵn có văn bản giữ chỗ, cho biết vị trí bạn sẽ triển khai logic trình truy xuất.
  5. Trong trình soạn thảo mã, hãy mở tệp src/lib/genkit/placesRetriever.ts.
  6. Di chuyển xuống hết trang rồi thay thế phần giữ chỗ placesRetriever bằng nội dung sau:
    export const placesRetriever = defineFirestoreRetriever({
      name: 'placesRetriever',
      firestore,
      collection: 'places',
      contentField: 'knownFor',
      vectorField: 'embedding',
      embedder: textEmbeddingGecko,
      distanceMeasure: 'COSINE',
    });

Kiểm thử trình truy xuất

  1. Trong giao diện người dùng dành cho nhà phát triển Genkit, hãy mở trình truy xuất retrievers/placesRetriever.
  2. Cung cấp Truy vấn sau:
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
  3. Bạn cũng có thể cung cấp Tuỳ chọn. Ví dụ: sau đây là cách chỉ định số lượng tài liệu mà trình truy xuất sẽ trả về:
    {
        "limit": 4
    }
  4. Nhấp vào Chạy.

Bạn có thể lọc thêm dữ liệu ngoài mức độ tương đồng bằng cách thêm mệnh đề where vào Tuỳ chọn.

8. Tạo sinh tăng cường truy xuất (RAG) bằng Genkit

Trong các phần trước, bạn đã tạo các câu lệnh riêng lẻ có thể xử lý văn bản, JSON và hình ảnh, tạo điểm đến cho kỳ nghỉ và nội dung hấp dẫn khác cho người dùng. Bạn cũng đã triển khai một lời nhắc truy xuất các đích đến có liên quan từ cơ sở dữ liệu Firestore. Bây giờ, đã đến lúc điều phối các thành phần này thành một quy trình tạo truy xuất tăng cường (RAG) gắn kết.

Phần này giới thiệu một khái niệm quan trọng của Genkit có tên là luồng. Flow (Luồng) là các hàm có thể truyền trực tuyến, được xác định kiểu rõ ràng và có thể được gọi cả cục bộ và từ xa, với khả năng quan sát đầy đủ. Bạn có thể quản lý và gọi các luồng từ cả CLI của Genkit và Giao diện người dùng dành cho nhà phát triển Genkit.

  1. Trong trình soạn thảo mã, hãy kiểm tra lời nhắc về hành trình:
    1. Mở tệp prompts/itineraryGen.prompt.
    2. Lưu ý cách lời nhắc được mở rộng để chấp nhận các dữ liệu đầu vào bổ sung, cụ thể là dữ liệu hoạt động lấy từ trình truy xuất.
  2. Trong giao diện người dùng dành cho nhà phát triển Genkit, hãy xem một luồng Genkit trong tệp src/lib/genkit/itineraryFlow.ts.
    Mẹo: Để đơn giản hoá quá trình gỡ lỗi, hãy cân nhắc việc chia các luồng dài thành các bước nhỏ hơn, dễ quản lý.
  3. Cải thiện quy trình bằng cách tích hợp bước "mô tả hình ảnh":
    1. Tìm bình luận TODO: 2 (xung quanh dòng 81). Đây là điểm đánh dấu nơi bạn sẽ cải thiện luồng.
    2. Thay thế phần giữ chỗ imgDescription trống bằng kết quả do lệnh gọi lời nhắc imgDescription tạo ra.
  4. Kiểm thử quy trình:
    1. Chuyển đến flows/itineraryFlow.
    2. Sử dụng dữ liệu đầu vào sau để kiểm thử việc thực thi thành công itineraryFlow bằng bước mới thêm:
      {
          "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. Nhấp vào Chạy.
    4. Quan sát kết quả được tạo, kết quả này sẽ kết hợp nội dung mô tả hình ảnh vào đề xuất về hành trình.
  5. Nếu bạn gặp lỗi hoặc hành vi không mong muốn, hãy kiểm tra thẻ Kiểm tra để biết thông tin chi tiết. Bạn cũng có thể sử dụng thẻ này để xem lại nhật ký thực thi từ Trace Store (Kho theo dõi).

RAG cho ứng dụng web

  1. Đảm bảo ứng dụng web vẫn đang chạy bằng cách truy cập vào http://localhost:3000/ trong trình duyệt.
  2. Nếu ứng dụng web không còn chạy nữa, hãy chạy các lệnh sau trong dòng lệnh:
    npm install
    npm run dev
  3. Hãy xem trang ứng dụng web Dream Your Vacation (Ước mơ về kỳ nghỉ của bạn) (http://localhost:3000/gemini).
  4. Xem mã nguồn (src/app/gemini/page.tsx) của lớp này để biết ví dụ về cách tích hợp Next.js.

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. Triển khai ứng dụng bằng tính năng Lưu trữ ứng dụng Firebase

Bước cuối cùng trong hành trình này là triển khai ứng dụng web. Bạn sẽ tận dụng Dịch vụ lưu trữ ứng dụng Firebase, một giải pháp lưu trữ nhận biết khung được thiết kế để đơn giản hoá việc triển khai ứng dụng Next.js và Angular cho phần phụ trợ không có máy chủ.

  1. Cam kết các thay đổi của bạn vào kho lưu trữ git cục bộ, sau đó đẩy lên GitHub.
  2. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Lưu trữ ứng dụng trong dự án Firebase.
  3. Nhấp vào Bắt đầu > Kết nối với GitHub.
  4. Chọn Tài khoản GitHubKho lưu trữ. Nhấp vào Tiếp theo.
  5. Trong phần Deployment setting > Root directory (Cài đặt triển khai > Thư mục gốc), hãy giữ nguyên giá trị mặc định.
  6. Đối với Nhánh phát trực tiếp, hãy chọn nhánh chính của kho lưu trữ GitHub. Nhấp vào Tiếp theo.
  7. Nhập mã nhận dạng cho phần phụ trợ (ví dụ: compass).
  8. Khi được hỏi Tạo hoặc liên kết ứng dụng web Firebase, hãy chọn Chọn một ứng dụng web Firebase hiện có rồi chọn ứng dụng bạn đã tạo ở bước trước trong lớp học lập trình này.
  9. Nhấp vào Hoàn tất và triển khai.

Theo dõi trạng thái triển khai

Quá trình triển khai sẽ mất vài phút. Bạn có thể theo dõi tiến trình trong mục Lưu trữ ứng dụng của bảng điều khiển Firebase.

Cấp quyền cho tài khoản dịch vụ

Để phần phụ trợ Node.js truy cập vào các tài nguyên Vertex AI, bạn cần chỉ định vai trò aiplatform.user cho tài khoản dịch vụ của ứng dụng:

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"

Sau khi hoàn tất, người dùng sẽ có thể truy cập vào ứng dụng web của bạn.

Tự động triển khai lại

Tính năng Lưu trữ ứng dụng Firebase giúp đơn giản hoá các bản cập nhật trong tương lai. Bất cứ khi nào bạn đẩy các thay đổi vào nhánh chính của kho lưu trữ GitHub, tính năng Lưu trữ ứng dụng Firebase sẽ tự động tạo lại và triển khai lại ứng dụng, đảm bảo người dùng luôn trải nghiệm phiên bản mới nhất.

10. Kết luận

Chúc mừng bạn đã hoàn thành lớp học lập trình toàn diện này!

Bạn đã khai thác thành công sức mạnh của Firebase Genkit, Firestore và Vertex AI để tạo một "luồng" phức tạp, tạo ra các đề xuất về kỳ nghỉ được cá nhân hoá dựa trên sở thích và cảm hứng của người dùng, đồng thời dựa vào dữ liệu của ứng dụng để đưa ra các đề xuất.

Trong suốt hành trình này, bạn đã có được kinh nghiệm thực tế về các mẫu kỹ thuật phần mềm thiết yếu, rất quan trọng để xây dựng các ứng dụng AI tạo sinh mạnh mẽ. Các mẫu này bao gồm:

  • Quản lý lời nhắc: Sắp xếp và duy trì lời nhắc dưới dạng mã để cộng tác và kiểm soát phiên bản hiệu quả hơn.
  • Nội dung đa phương thức: Tích hợp nhiều loại dữ liệu, chẳng hạn như hình ảnh và văn bản, để tăng cường khả năng tương tác với AI.
  • Biểu đồ đầu vào/đầu ra: Sắp xếp dữ liệu để tích hợp và xác thực liền mạch trong ứng dụng.
  • Kho vectơ: Tận dụng các vectơ nhúng để tìm kiếm và truy xuất thông tin liên quan một cách hiệu quả.
  • Truy xuất dữ liệu: Triển khai các cơ chế để tìm nạp và kết hợp dữ liệu từ cơ sở dữ liệu vào nội dung do AI tạo.
  • Tạo sinh tăng cường truy xuất (RAG): Kết hợp các kỹ thuật truy xuất với AI tạo sinh để tạo ra kết quả chính xác và phù hợp theo ngữ cảnh.
  • Đo lường quy trình: Xây dựng và điều phối quy trình làm việc phức tạp của AI để thực thi liền mạch và có thể quan sát được.

Bằng cách nắm vững các khái niệm này và áp dụng chúng trong hệ sinh thái Firebase, bạn đã sẵn sàng để bắt đầu hành trình khám phá genAI của riêng mình. Khám phá vô vàn khả năng, tạo ra các ứng dụng sáng tạo và tiếp tục đẩy xa ranh giới của những điều có thể làm được bằng AI tạo sinh.

Khám phá các tuỳ chọn triển khai thay thế

Genkit cung cấp nhiều lựa chọn triển khai phù hợp với nhu cầu cụ thể của bạn, bao gồm:

Bạn chỉ cần chọn một trong những thư mục phù hợp nhất với mình bằng cách chạy lệnh sau trong thư mục nút (package.json):

npx genkit init

Các bước tiếp theo