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

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 công khai.

Genkit được thiết kế cho các nhà phát triển ứng dụng, giúp bạn dễ dàng tích hợp các chức năng AI mạnh mẽ vào ứng dụng của mình theo các mẫu và mô hình quen thuộc. Nền tảng này là do nhóm Firebase xây dựng, khai thác 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 của bạn để 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 ứng dụng web và các 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 ứng dụng có tên là La bàn – một ứng dụng lập kế hoạch cho kỳ nghỉ. Người dùng có thể chọn một điểm đến, xem qua các hoạt động tại điểm đến đó và tạo 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 cho thấy một 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.

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

Bộ công cụ tạo Firebase

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 đó dữ liệu này được dùng để tìm kiếm vectơ tương đồng.

Vertex AI của Google Cloud

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

Firebase App Hosting

Bạn có thể tuỳ ý sử dụng tính năng Lưu trữ ứng dụng Firebase mới được tinh giản để 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.

Lấy 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 một 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 một kho lưu trữ mới:

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

Xem cấu trúc thư mục

Trên máy cục bộ, hãy tìm kho lưu trữ được sao chép rồi kiểm tra cấu trúc thư mục:

Thư mục

Nội dung mô tả

genkit-functions

Mã Genkit phụ trợ

load-firestore-data

Công cụ dòng lệnh của Trình trợ giúp giúp điền sẵn bộ sưu tập trên Firestore một cách nhanh chóng

*mọi thứ khác

Mã ứng dụng web Next.js

Thư mục gốc bao gồm một tệp README.md giúp khởi động nhanh ứng dụng web bằng các hướng dẫn đơn giản. Tuy nhiên, nếu mới học lập trình, 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 liệu mình đã áp dụng đúng mã như hướng dẫn trong lớp học lập trình này hay chưa, bạn có thể tìm đoạn mã giải pháp trong nhánh git end.

Cài đặt Firebase CLI

  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 Firebase CLI, 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 dòng lệnh, hãy đăng nhập vào Firebase:
    firebase login
    
    Nếu cửa sổ 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 dòng lệnh, tuỳ thuộc vào việc bạn muốn Firebase thu thập dữ liệu, hãy nhập Y hoặc N. (một trong hai cách đều phù hợp với 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 gcloud CLI.
  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 này 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 của Firebase.

Tạo dự án Firebase

  1. Đăng nhập vào bảng điều khiển của Firebase bằng chính Tài khoản Google mà bạn đã dùng trong bước trước.
  2. Nhấp vào Tạo dự án, sau đó nhập tên dự án (ví dụ: Compass Codelab).
    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). Sau này, bạn sẽ cần mã này để xác định dự án Firebase của mình trong Giao diện dòng lệnh (CLI) của Firebase. 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 đế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, nhập biệt hiệu dễ nhớ của ứng dụng, chẳng hạn như My Compass Codelab App. Bạn có thể bỏ đánh dấu hộp kiểm để thiết lập tính năng Lưu trữ Firebase, vì bạn sẽ thiết lập dịch vụ lưu trữ (không bắt buộc) 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 với bảng điều khiển.

Vậy thì tuyệt quá! Bạn hiện đã đăng ký một ứng dụng web trong dự án Firebase mới của mình.

Nâng cấp gói giá Firebase của bạn

Để 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 phải 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 Thanh toán trên đám mây.

  • 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 300 USD và tài khoản dùng thử miễn phí trên Cloud Billing 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ó tín dụng Cloud nào không.

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

Để nâng cấp dự án của bạn lên Gói linh hoạt, 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 của bạn.
  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 thanh toán Cloud với dự án của bạn.
    Nếu cần tạo một tài khoản thanh toán Cloud trong quá trình nâng cấp này, bạn có thể phải quay lại quy trình nâng cấp trong bảng điều khiển của 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 bảng điều khiển của Firebase, hãy mở rộng mục Build (Tạo) rồi chọn Firestore cơ sở dữ liệu.
  2. Nhấp vào Tạo cơ sở dữ liệu.
  3. Hãy đặ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, rồi 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 một ứng dụng mà không thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn.
  6. Nhấp vào Tạo.

Bật Vertex AI

Dùng gcloud CLI để 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 dòng lệnh, 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ó nội dung "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 dòng lệnh 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 Giao diện dòng lệnh (CLI) của Firebase để nhắm đến dự án của bạn

  1. Trong dòng lệnh, 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ể nhanh chóng bắt đầu, lớp học lập trình này 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ã bình thường sử dụng tài khoản dịch vụ, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:
    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

Cơ sở mã của ứng dụng web của bạn cần được liên kết với đúng dự án Firebase để sử dụng các dịch vụ của ứng dụng web, 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 cho ứng dụng của bạn:
    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
    
  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 URL 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 cố định giá trị trong mã cho một số đích đến cố định:

Màn hình Tìm chuyến đi trong mơ của tôi

Bạn cứ thoải mái 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 mô hình tạo sinh này (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 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

Trước khi có thể chạy Genkit, cơ sở mã của bạn cần được liên kết với đúng dự án Firebase để sử dụng các dịch vụ của Genkit, 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 Genkit. 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 của bạn tương tác với Firebase.

  1. Lấy cấu hình Firebase cho ứng dụng của bạn:
    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 của ứng dụng vào cơ sở mã của ứng dụng Genkit:
    1. Trong trình soạn thảo mã, hãy mở tệp genkit-functions/src/lib/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.

Khởi chạy giao diện người dùng Genkit Developer UI

Genkit đi kèm với một giao diện người dùng dựa trên nền tảng web, cho phép bạn tương tác với các mô hình ngôn ngữ lớn (LLM), quy trình Genkit, trình truy xuất dữ liệu và các thành phần AI khác.

  1. Chạy giao diện người dùng dành cho nhà phát triển Genkit:
    1. Mở một cửa sổ dòng lệnh mới.
    2. Chuyển đến gốc của thư mục genkit-functions.
    3. Chạy lệnh sau để khởi động giao diện người dùng dành cho nhà phát triển Genkit:
      cd genkit-functions
      npx genkit start
      
  2. 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 Genkit Developer UI

Quản lý lời nhắc

Firebase Genkit ra mắt 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 dựa trên AI tạo sinh. Ý tưởng cốt lõi đằng sau Dotprompt là coi lời 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 genkit-functions/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ở dotprompt/1-hello-world.
  3. Hãy sử dụng tên hoặc mã ngôn ngữ mà bạn quen thuộc hoặc để trống.
  4. Nhấp vào Run (Chạy).Sử dụng Dotprompt để tạo một lời chào bằng tiếng Thuỵ Điển
  5. Hãy thử một vài giá trị khác. Mô hình ngôn ngữ lớn rất giỏi 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 dotprompt/2-simple-itinerary.
    2. Kiểm tra các 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 Genkit Developer UI, hãy chuyển đến phần dotprompt/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 Run (Chạy).

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

Tìm hiểu đầu ra dựa trên giản đồ

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 dữ liệu đầ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 độ chính xác và nhất quán của dữ liệu đầu ra được tạo.
  • Xử lý lỗi: Triển khai các cơ chế để xử lý các trường hợp không khớp trong giản đồ.

Việc tận dụng giản đồ đầu ra sẽ nâng cao trải nghiệm 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 cho kỳ nghỉ được cá nhân hoá dựa trên những hình ảnh mà người dùng thấy truyền 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ã của bạn, hãy kiểm tra tệp lời nhắc:
    1. Mở tệp genkit-functions/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 dotprompt/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 sẽ có một cơ sở dữ liệu về đích đến (địa điểm và hoạt động) và cố gắng đảm bảo rằng các đề xuất của mô hình Gemini chỉ tham chiếu đến các mục nhập trong cơ sở dữ liệu này.

Để thu hẹp khoảng cách giữa truy vấn 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ìm kiếm vectơ tương tự trên các mục nhúng đã tạo.

Tìm hiểu về các bước nhúng và vectơ tương tự

  • Vectơ: Vectơ là biểu diễn bằng số của các điểm dữ liệu, thường dùng để lập mô hình thông tin phức tạp như văn bản hoặc hình ảnh. Mỗi chiều trong một vectơ tương ứng với một đối tượng dữ liệu cụ thể.
  • 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 các vectơ chiều cao. Đ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. Với một truy vấn đầu vào, truy vấn này sẽ tìm các mục trong cơ sở dữ liệu có các vectơ nhúng tương tự, cho thấy mối liên quan về mặt 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: Lý tưởng 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ụ: mức độ tương đồng cosin).
  4. Truy xuất: Các mục tương tự nhất từ cơ sở dữ liệu, dựa trên độ gần của chúng với vectơ truy vấn, được truy xuất dưới dạng các đề xuất có liên quan.

Khi áp dụng cơ chế truy xuất này vào ứng dụng của mình, bạn sẽ tận dụng mô hình Gemini để tạo ra các gợi ý không chỉ mang tính sáng tạo mà còn gắn liền với 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 điểm tương đồng của vectơ 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ùng với trường embedding tương ứng chứa đại diện vectơ của 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 sự tương đồng vectơ trên các mục 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 các địa điểm một cách hiệu quả dựa trên sự tương đồng của các vectơ nhúng của chúng với một truy vấn 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ã dự án của bạn.
    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. Trong giao diện người dùng dành cho nhà phát triển Genkit, hãy mở placesRetriever.
  4. Nhấp vào Run (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 truy xuất.
  5. Trong trình soạn thảo mã, hãy mở tệp genkit-functions/src/lib/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ử tệp Retriever

  1. Trong giao diện người dùng Genkit Developer, mở trình truy xuất placesRetriever.
  2. Cung cấp Truy vấn sau:
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
    
  3. Bạn cũng có thể cung cấp mục Tuỳ chọn. Ví dụ: dưới đâ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. Truy xuất thế hệ tăng cường (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 về Genkit được gọi là flow. Flow là các hàm được định kiểu rõ ràng, có thể phát trực tuyến, có thể được gọi cả cục bộ lẫn từ xa với khả năng ghi nhận đầ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 genkit-functions/prompts/itineraryGen.prompt.
    2. Hãy lưu ý cách mở rộng câu lệnh để chấp nhận dữ liệu đầu vào bổ sung, cụ thể là dữ liệu hoạt động có nguồn 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 quy trình Genkit trong tệp genkit-functions/src/lib/itineraryFlow.ts.
    Mẹo: Để đơn giản hoá việc gỡ lỗi, hãy cân nhắc chia nhỏ các quy trình dài thành các bước nhỏ hơn, dễ quản lý hơn.
  3. Cải thiện luồng nội dung bằng cách tích hợp bước "mô tả hình ảnh":
    1. Tìm chú thích TODO: 2 (xung quanh dòng 70). Đâ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 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 đầu ra được tạo ra, kết hợp nội dung mô tả hình ảnh với nội dung đề 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 dấu vết).

RAG cho ứng dụng web của bạn

  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) để biết ví dụ về tích hợp Next.js.

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.pngS19c0c9459d5e1601.pngS

9. Triển khai ứng dụng của bạn 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 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 các ứng dụng Next.js và Angular cho một phần phụ trợ không máy chủ.

  1. Xác nhận nội dung thay đổi vào kho lưu trữ git cục bộ rồi đẩ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 của bạn.
  3. Nhấp vào Bắt đầu > Kết nối với GitHub.
  4. Chọn tài khoản GitHubRepository. 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 Live, 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 Finish and Deploy (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ụ của bạn

Để phần phụ trợ Node.js có thể truy cập vào các tài nguyên của 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 ứ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 áp dụng 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 của bạn, đả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 &quot;luồng&quot; tinh vi, 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 đã tích luỹ được kinh nghiệm thực tế về các mẫu kỹ thuật phần mềm thiết yếu, tối quan trọng để xây dựng các ứng dụng AI tạo sinh hiệu quả. Các mẫu này bao gồm:

  • Quản lý câu lệnh: Sắp xếp và duy trì các câu lệnh dưới dạng đoạn 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 các hoạt động tương tác với AI.
  • Giản đồ đầu vào/đầu ra: Định cấu trúc dữ liệu để tích hợp và xác thực liền mạch trong ứng dụng của bạn.
  • Cửa hàng vectơ: Sử dụng các mục nhúng vectơ để tìm kiếm sự tương đồng một cách hiệu quả và truy xuất thông tin có liên quan.
  • 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.
  • Thế hệ 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 để cung cấp dữ liệu đầu ra chính xác và phù hợp với ngữ cảnh.
  • Khả năng đo lường dòng chảy: Xây dựng và sắp xếp các quy trình làm việc phức tạp dựa trên AI để thực thi liền mạch và có thể ghi nhận đượ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á những khả năng vô cùng to lớn, tạo ra các ứng dụng tiên tiến và tiếp tục mở rộng những giới hạn của những điều có thể đạt được với AI tạo sinh.

Khám phá các lựa chọn triển khai thay thế

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

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

npx genkit init

Các bước tiếp theo