Tạo các tính năng AI tạo sinh dựa trên dữ liệu của bạn bằng 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 Genkit để tích hợp AI tạo sinh vào ứng dụng của mình. Genkit là một khung nguồn mở giúp bạn tạo, triển khai và giám sát các ứng dụng dựa trên AI sẵn sàng cho hoạt động sản xuất.

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 bằng các mẫu và mô hình quen thuộc. Công cụ này được 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

  • Làm quen với Firestore, Node.js và TypeScript.

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

  • Cách tạo ứng dụng thông minh hơn bằng các tính năng tìm kiếm nâng cao dựa trên độ tương tự của vectơ trong Firestore.
  • Cách triển khai AI tạo sinh một cách thiết thực trong các ứng dụng của bạn bằng 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 chỉnh sửa mã và cửa sổ dòng lệnh
  • Một Tài khoản Google để tạo và quản lý dự án Firebase

2. Xem xét ứng dụng web và các dịch vụ đám mây đã dùng

Trong phần này, bạn sẽ xem xét ứng dụng web mà bạn sẽ tạo bằng 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 du lịch. 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 mình.

Trong lớp học lập trình này, bạn sẽ triển khai 2 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 dựa trên AI tạo sinh:

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

d54f2043af908fb.png

Các dịch vụ được 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, đồng thời hầu hết mã khởi đầu cho các dịch vụ và tính năng đó đề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

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 đó dữ liệu này được dùng cho tính năng tìm kiếm tương tự theo vectơ.

Vertex AI của Google Cloud

Bạn 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 dịch vụ 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 một kho lưu trữ trên 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 thiết bị đầu cuối, 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 trên 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 mà bạn vừa tạo cho lớp học lập trình:
    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 xét cấu trúc thư mục

Trên máy cục bộ, hãy tìm kho lưu trữ đã sao chép rồi xem 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 dữ liệu vào bộ sưu tập Firestore

*mọi thứ khác

Mã ứng dụng web Next.js

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

Nếu không chắc chắn về việc bạn đã áp dụng mã đúng cách theo hướng dẫn trong 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à đó là phiên bản 13.6 trở lên:
    firebase --version
    
  2. Nếu bạn đã cài đặt Firebase CLI nhưng không phải là 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 về quyền, hãy xem tài liệu npm hoặc sử dụng lựa 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 thiết bị đầu cuối cho biết bạn đã đăng nhập vào Firebase, thì 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 muốn Firebase thu thập dữ liệu hay không, hãy nhập Y hoặc N. (cả hai lựa chọn đề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 Google Cloud CLI

  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 đó. Sau này trong lớp học lập trình này, bạn cũng sẽ bật một số dịch vụ mà ứng dụng web mẫu sử dụng.

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 một 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 ở bước trước.
  2. Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ: Compass Codelab).
  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, rồi nhấp vào Tiếp tục.
  5. (Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
  6. Đố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 lựa chọn Google Analytics.
  7. 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 một ứng dụng web vào dự án Firebase

  1. Chuyển đến màn hình Tổng quan về dự án trong dự án Firebase của bạn, rồi nhấp vào Một biểu tượng có dấu ngoặc nhọn mở, dấu gạch chéo và dấu ngoặc nhọn đóng, biểu thị 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 của Firebase
  2. Trong hộp văn bản Biệt hiệu của ứng dụng, hãy nhập một biệt hiệu dễ nhớ cho ứng dụng, chẳng hạn như My Compass Codelab App. Bạn có thể bỏ đánh dấu hộp thiết lập Firebase Hosting, vì bạn sẽ thiết lập một dịch vụ lưu trữ (không bắt buộc) ở 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 truy cập vào 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á của Firebase

Để sử dụng 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ìm hiểu thêm về 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 một tài khoản thanh toán trê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 trên Cloud 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 bảng điều khiển Firebase, hãy mở rộng mục Tạo rồi chọn Cơ sở dữ liệu Firestore.
  2. Nhấp vào Tạo cơ sở dữ liệu.
  3. Để nguyên Mã cơ sở dữ liệu được đặt thành (default).
  4. Chọn một vị trí cho cơ sở dữ liệu của bạn, rồi nhấp vào Tiếp theo.
    Đối với một ứng dụng thực tế, bạn nên chọn một vị trí gần với người dùng của mình.
  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.
    Khô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 của bạn.
  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 dự án Firebase của bạn.

  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 đăng nhập mặc định của ứng dụng cục bộ. Điều này có thể dẫn đến các vấn đề không mong muốn về hạn mức", 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 của bạ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 chỉnh sửa 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 dự án Firebase của bạn.

Đị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 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. Để Firebase CLI thực thi tất cả các lệnh đối với dự án Firebase của bạn, 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 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ã mà 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:
    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 Tài khoản Google mà bạn đã dùng trong các bước trước.
  2. Để nhập dữ liệu mẫu của Firestore, 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 mục Firestore của dự án Firebase trong bảng điều khiển của 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 về la bàn trong bảng điều khiển của Firebase

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

Cơ sở mã của ứng dụng web cần được liên kết với dự án Firebase phù hợp để 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 của bạn 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à định cấu hình SDK", hãy chọn mục Config (Cấu hình).
    5. Sao chép đoạn mã. Nó 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 chỉnh sửa mã, hãy mở tệp src/lib/genkit/genkit.config.ts.
    2. Thay thế phần có liên quan bằng mã 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 thiết bị đầu cuối, 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 La bàn

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 mơ ước của tôi. Bạn có thể thấy ứng dụng này hiển thị một số dữ liệu được mã hoá cứng cho một số đích đến cố định:

Màn hình Tìm chuyến đi trong mơ

Bạn có thể 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ủ Trang chủ (ở góc trên cùng bên phải).

6. Khám phá 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 nguồn cảm hứng do người dùng cung cấp. Bạn sẽ sử dụng 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ữ trạng thái dấu vết và luồng (cho phép bạn kiểm tra kết quả 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.

Trong 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 của mình lên dịch vụ Lưu trữ ứng dụng Firebase.

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

Chúng tôi đã 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 một giao diện người dùng dựa trên web, cho phép bạn tương tác với các LLM, luồng Genkit, trình truy xuất và các thành phần AI khác.

Trong thiết bị đầu cuối, 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, đó 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ư câu lệnh, công cụ truy xuất và luồng Genkit.

Ví dụ: hãy thử yêu cầu Gemini đề xuất một kỳ nghỉ lễ. Lưu ý cách bạn có thể sử dụng chỉ dẫn hệ thống để điều chỉnh 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 những mô hình không hỗ trợ sẵn các chỉ 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ý câu lệnh

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âu lệnh AI tạo sinh. Ý tưởng cốt lõi đằng sau Dotprompt là coi câu lệnh như mã, cho phép bạn viết, duy trì và kiểm soát phiên bản của câu lệnh cùng với mã ứng dụng.

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

  1. Trong trình chỉnh sửa 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 của Genkit, hãy mở prompts/1-hello-world.
  3. Sử dụng tên hoặc mã ngôn ngữ bất kỳ mà bạn biết, hoặc để trống.
  4. Nhấp vào 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. Các mô hình ngôn ngữ lớn có khả năng hiểu rõ những 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ú đầu ra 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 cho phép bạn 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 ra 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 một lệnh gọi LLM.

  1. Trong trình chỉnh sửa 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 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 đầu ra dựa trên giản đồ, đảm bảo tính toàn vẹn của dữ liệu.

Ngoài ra, bạn có thể định cấu hình Genkit để thử lại hoặc cố gắng sửa chữa đầ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

  • Đơn giản hoá quy trình tích hợp: Dễ dàng kết hợp dữ liệu có cấu trúc vào các phần tử 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à 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ế để giải quyết tình trạng không khớp giản đồ.

Việc tận dụng các giản đồ đầu ra sẽ nâng cao trải nghiệm của bạn trên 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 hoạt hơn cho người dùng.

Sử dụng thông tin đầu vào đ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 du lịch phù hợp với từng người dùng dựa trên những hình ảnh mà họ thấy truyền cảm hứng. Genkit, kết hợp với một 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 chỉnh sửa mã, hãy kiểm tra tệp lời nhắc:
    1. Mở tệp prompts/imgDescription.prompt.
    2. Lưu ý rằng bạn có thể thêm {{media url=this}}. Đây là một phần tử cú pháp Handlebars giúp bạn dễ dàng kết hợp hình ảnh vào câu lệ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 mở câu lệnh prompts/imgDescription.
    2. Nhập URL hình ảnh vào trường imageUrls bằng cách dán URL của một hình ảnh. Ví dụ: bạn có thể sử dụng hình thu nhỏ từ Wikipedia giới thiệu 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 hoạt động truy xuất bằng tính năng tìm kiếm tương tự theo vectơ

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 phải đặt kết quả trong một bối 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à muốn đảm bảo rằng các đề xuất do mô hình Gemini tạo ra 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ác 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ìm kiếm tương đồng vectơ trên các mục nhúng được tạo.

Tìm hiểu về các mục nhúng và độ tương đồng của vectơ

  • Vectơ: Vectơ là biểu diễn bằ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 chuyển đổi dữ liệu đầu vào (chẳng hạn như văn bản) thành vectơ nhiều chiều. Điểm thú vị là các đầu vào tương tự được ánh xạ đến các vectơ gần nhau trong không gian nhiều chiều này.
  • Tìm kiếm mức độ tương đồng của vectơ: Kỹ thuật này tận dụng độ gần 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 cụm từ tìm kiếm đầu vào, phương thức 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ối 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 cụm từ tìm kiếm: Đầ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. Thông tin nhúng cơ sở dữ liệu: Tốt nhất là bạn nên xử lý trước cơ sở dữ liệu về các điểm đến, tạo vectơ nhúng cho từng mục.
  3. Tính toán độ 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 mức độ gần với vectơ truy vấn) được truy xuất dưới dạng các đề 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 của mình, bạn có thể tận dụng mô hình Gemini để tạo ra những đề 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 đầu ra đượ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 mức độ tương đồng của vectơ trong Firestore

Trong một 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 đều có 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 biểu 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 tương tự theo 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 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. Tạo chỉ mục, nhớ thay thế YOUR_PROJECT_ID bằng mã nhận dạng dự án của bạ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": "{}"}'
    
  2. Trong giao diện người dùng dành cho nhà phát triển Genkit, hãy mở retrievers/placesRetriever.
  3. Nhấp vào Chạy. Quan sát đối tượng được giàn giáo bằng văn bản giữ chỗ, cho biết nơi bạn sẽ triển khai logic của trình truy xuất.
  4. Trong trình chỉnh sửa mã, hãy mở tệp src/lib/genkit/placesRetriever.ts.
  5. 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(ai, {
      name: 'placesRetriever',
      firestore,
      collection: 'places',
      contentField: 'knownFor',
      vectorField: 'embedding',
      embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
      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 đây:
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
    
  3. Bạn cũng có thể cung cấp Các lựa 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 tự bằng cách thêm các mệnh đề where vào Lựa 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ó khả năng xử lý văn bản, JSON và hình ảnh, tạo ra các điểm đến du lịch và nội dung hấp dẫn khác cho người dùng. Bạn cũng đã triển khai một câu lệnh truy xuất các đích đến có liên quan từ cơ sở dữ liệu Firestore. Giờ là lúc điều phối các thành phần này thành một quy trình tạo tăng cường truy xuất (RAG) mạch lạc.

Phần này giới thiệu một khái niệm quan trọng của Genkit, đó là luồng. Luồng là các hàm có thể truyền trực tuyến và được nhập mạnh, 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ả giao diện dòng lệnh 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 mở rộng câu lệnh để 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 quy trình Genkit trong tệp src/lib/genkit/itineraryFlow.ts.
    Lưu ý: Để đơn giản hoá việc gỡ lỗi, hãy cân nhắc chia các quy trình dài thành các bước nhỏ hơn và dễ quản lý hơn.
  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 (khoảng dòng 81). Đây là điểm đánh dấu nơi bạn sẽ cải thiện quy trình.
    2. Thay thế phần giữ chỗ imgDescription trống bằng đầu ra do lệnh gọi imgDescription tạo ra.
  4. Kiểm thử quy trình:
    1. Chuyển đến flows/itineraryFlow.
    2. Sử dụng đầ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 phải 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 phải 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ể dùng thẻ này để xem lại nhật ký thực thi từ Trace Store (Cửa hàng dấu vết).

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

  1. Đảm bảo rằng ứ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, hãy chạy các lệnh sau trong thiết bị đầu cuối:
    npm install
    npm run dev
    
  3. Hãy xem trang ứng dụng web Dream Your Vacation (http://localhost:3000/gemini).
  4. Xem mã nguồn (src/app/gemini/page.tsx) để biết ví dụ về việc 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ữ có 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 vào một phụ trợ phi máy chủ.

  1. Xác nhận các 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 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 GitHubKho lưu trữ của bạn. 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 trực tiếp, hãy chọn nhánh main của kho lưu trữ GitHub. Nhấp vào Tiếp theo.
  7. Nhập một mã nhận dạng cho phần phụ trợ của bạn (ví dụ: compass).
  8. Khi được hỏi có Tạo hoặc liên kết một ứng dụng web Firebase hay không, hãy chọn Chọn một ứng dụng web Firebase hiện có rồi chọn ứng dụng mà 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 của Firebase.

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

Để 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.

Triển khai lại tự động

Firebase App Hosting 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, Dịch vụ 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 sử dụng 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 Genkit, Firestore và Vertex AI để tạo ra một "luồng" tinh vi, tạo ra các đề xuất du lịch phù hợp với từng người dùng dựa trên sở thích và nguồn cảm hứng của họ, đồng thời đưa ra các đề xuất dựa trên dữ liệu của ứng dụng.

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, đóng vai trò quan trọng trong việc 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ý câu lệnh: Sắp xếp và duy trì câu lệnh 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, để cải thiện các hoạt động tương tác với AI.
  • Sơ đồ đầu vào/đầu ra: 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.
  • Kho vectơ: Tận 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 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.
  • Tạo sinh tăng cường khả nă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ả phù hợp và chính xác theo ngữ cảnh.
  • Đo lường luồng: Xây dựng và sắp xếp các quy trình AI phức tạp để thực thi liền mạch và có thể quan sát được.

Khi nắm vững những khái niệm này và áp dụng chúng trong hệ sinh thái Firebase, bạn sẽ có đủ kiến thức để bắt đầu hành trình khám phá AI tạo sinh của riêng mình. Khám phá vô vàn khả năng, tạo ra các ứng dụng cải tiến và tiếp tục mở rộng ranh giới của những gì có thể đạt được bằng AI tạo sinh.

Khám phá các lựa 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 lệnh phù hợp nhất 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