Tạo trải nghiệm kết hợp trong các ứng dụng Web bằng các mô hình được lưu trữ trên thiết bị và trên đám mây

Tạo các ứng dụng và tính năng web dựa trên AI bằng suy luận kết hợp bằng Firebase AI Logic. Suy luận kết hợp cho phép chạy suy luận bằng các mô hình trên thiết bị khi có sẵn và chuyển đổi liền mạch sang các mô hình được lưu trữ trên đám mây nếu không (và ngược lại).

Trang này mô tả cách bắt đầu sử dụng SDK ứng dụng. Sau khi hoàn tất quá trình thiết lập tiêu chuẩn này, hãy xem các lựa chọn và chức năng cấu hình bổ sung (chẳng hạn như đầu ra có cấu trúc).

Xin lưu ý rằng suy luận trên thiết bị được hỗ trợ cho các ứng dụng web chạy trên Chrome trên máy tính.

Chuyển đến các ví dụ về mã

Các trường hợp sử dụng được đề xuất và các chức năng được hỗ trợ

Các trường hợp sử dụng được đề xuất:

  • Sử dụng mô hình trên thiết bị cho các đề xuất suy luận:

    • Quyền riêng tư nâng cao
    • Bối cảnh địa phương
    • Suy luận miễn phí
    • Chức năng ngoại tuyến

  • Sử dụng các chức năng kết hợp:

    • Tiếp cận 100% đối tượng của bạn, bất kể khả năng cung cấp mô hình trên thiết bị hay khả năng kết nối Internet

Các chức năng và tính năng được hỗ trợ cho suy luận trên thiết bị:

Suy luận trên thiết bị chỉ hỗ trợ tạo văn bản một lượt (không phải là cuộc trò chuyện), với đầu ra truyền trực tuyến hoặc không truyền trực tuyến. Công cụ này hỗ trợ các khả năng tạo văn bản sau:

Bạn cũng có thể tạo đầu ra có cấu trúc, bao gồm cả JSON và enum.

Trước khi bắt đầu

Hãy lưu ý những điều sau:

Bắt đầu trên localhost

Các bước bắt đầu này mô tả chế độ thiết lập chung bắt buộc cho mọi yêu cầu về câu lệnh được hỗ trợ mà bạn muốn gửi.

Bước 1: Thiết lập Chrome và Prompt API để suy luận trên thiết bị

  1. Đảm bảo bạn đang dùng phiên bản Chrome gần đây. Cập nhật trong chrome://settings/help.
    Suy luận trên thiết bị có trong Chrome phiên bản 139 trở lên.

  2. Bật mô hình đa phương thức trên thiết bị bằng cách đặt cờ sau thành Enabled (Đã bật):

    • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

  3. Khởi động lại Chrome.

  4. (Không bắt buộc) Tải mô hình trên thiết bị xuống trước yêu cầu đầu tiên.

    Prompt API được tích hợp vào Chrome; tuy nhiên, theo mặc định, mô hình trên thiết bị sẽ không hoạt động. Nếu bạn chưa tải mô hình xuống trước yêu cầu đầu tiên về suy luận trên thiết bị, thì yêu cầu sẽ tự động bắt đầu tải mô hình xuống ở chế độ nền.

Bước 2: Thiết lập một dự án Firebase và kết nối ứng dụng của bạn với Firebase

  1. Đăng nhập vào bảng điều khiển Firebase, sau đó chọn dự án Firebase của bạn.

  2. Trong bảng điều khiển Firebase, hãy chuyển đến AI Services (Dịch vụ AI) > AI Logic (Logic AI).

  3. Nhấp vào Bắt đầu để chạy một quy trình có hướng dẫn giúp bạn thiết lập các API bắt buộc và tài nguyên cho dự án của mình.

  4. Nếu được nhắc, hãy làm theo hướng dẫn trên màn hình để đăng ký ứng dụng và thêm cấu hình Firebase vào ứng dụng.

  5. Khi được yêu cầu chọn "nhà cung cấp Gemini API", bạn nên chọn Gemini Developer API để bắt đầu nhanh chóng mà không mất phí.

    Bất cứ lúc nào sau này, bạn đều có thể thiết lập Vertex AI Gemini API (và yêu cầu về việc thanh toán).

  6. Tiếp tục quy trình để thiết lập các API bắt buộc và các dịch vụ liên kết cho Firebase AI Logic.

    Kể từ đầu tháng 7 năm 2026, giai đoạn này của quy trình làm việc sẽ tự động thực thi Firebase App Check cho AI Logic, đây là một dịch vụ quan trọng giúp bảo vệ Gemini API khi được truy cập trực tiếp từ ứng dụng của bạn. Trong quá trình bắt đầu (xem các bước sau trong hướng dẫn này), bạn sẽ cần định cấu hình trình cung cấp gỡ lỗi App Check để phát triển cục bộ khi App Check được thực thi.

  7. Tiếp tục đến bước tiếp theo trong hướng dẫn này để thêm các SDK bắt buộc vào ứng dụng của bạn.

Bước 3: Thêm SDK

Thư viện Firebase cung cấp quyền truy cập vào các API để tương tác với các mô hình tạo sinh. Thư viện này được đưa vào SDK JavaScript của Firebase cho Web.

  1. Cài đặt Firebase JS SDK cho Web bằng npm:

    npm install firebase

  2. Khởi động Firebase trong ứng dụng của bạn:

    import { initializeApp } from "firebase/app";
import { initializeAppCheck, DebugProvider } from "firebase/app-check";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

Bước 3: Định cấu hình trình cung cấp gỡ lỗi App Check để phát triển cục bộ

Kể từ đầu tháng 7 năm 2026, trong quy trình thiết lập có hướng dẫn cho AI Logic trong Play Console, Firebase App Check sẽ tự động được thực thi để bảo vệ Gemini API. Đối với quá trình phát triển cục bộ, bạn cần định cấu hình trình cung cấp gỡ lỗi App Check để bỏ qua chứng thực trong khi vẫn duy trì việc thực thi App Check.

Sau đây là cách sử dụng trình cung cấp gỡ lỗi trong khi chạy ứng dụng từ localhost một cách tương tác (ví dụ: trong quá trình phát triển cục bộ):

  1. Trong bản gỡ lỗi, hãy bật chế độ gỡ lỗi bằng cách đặt self.FIREBASE_APPCHECK_DEBUG_TOKEN thành true trước khi bạn khởi chạy App Check. Ví dụ:

    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(app, { /* App Check options */ });

  2. Truy cập vào ứng dụng web của bạn trên thiết bị và mở công cụ dành cho nhà phát triển của trình duyệt. Trong bảng điều khiển gỡ lỗi, bạn sẽ thấy một mã gỡ lỗi:

    AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.

  3. Đăng ký mã thông báo gỡ lỗi bằng App Check:

    1. Trong bảng điều khiển Firebase, hãy chuyển đến thẻ Bảo mật > App Check > Ứng dụng.

    2. Tìm ứng dụng của bạn, nhấp vào trình đơn tràn (), rồi chọn Quản lý mã gỡ lỗi.

    3. Làm theo hướng dẫn trên màn hình để đăng ký mã gỡ lỗi.

Để biết thông tin chi tiết về trình cung cấp gỡ lỗi (bao gồm cả cách lấy mã gỡ lỗi mới), hãy xem tài liệu App Check chính thức.

Bước 4: Khởi chạy dịch vụ và tạo một phiên bản mô hình

Nhấp vào nhà cung cấp Gemini API để xem nội dung và mã dành riêng cho nhà cung cấp trên trang này.

Thiết lập những nội dung sau trước khi gửi yêu cầu cho mô hình:

  1. Khởi chạy dịch vụ cho nhà cung cấp API mà bạn đã chọn.

  2. Tạo một thực thể GenerativeModel. Đảm bảo bạn đặt mode thành một trong các chế độ sau:

    • PREFER_ON_DEVICE: Sử dụng mô hình trên thiết bị nếu có; nếu không, hãy quay lại mô hình được lưu trữ trên đám mây.

    • ONLY_ON_DEVICE: Sử dụng mô hình trên thiết bị nếu có; nếu không, hãy gửi một trường hợp ngoại lệ.

    • PREFER_IN_CLOUD: Sử dụng mô hình được lưu trữ trên đám mây nếu có; nếu không, hãy chuyển về mô hình trên thiết bị.

    • ONLY_IN_CLOUD: Sử dụng mô hình được lưu trữ trên đám mây nếu có; nếu không, hãy gây ra một ngoại lệ.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

Bước 5: Khởi tạo mô hình trên thiết bị

Bạn phải gọi initializeDeviceModel() sau hoặc vào một lượt tương tác trên trang người dùng cuối (chẳng hạn như lượt nhấp vào nút) và trước khi bạn gửi yêu cầu lời nhắc đến mô hình. Tìm hiểu thêm về yêu cầu kích hoạt người dùng trong tài liệu của Chrome.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

Bước 6: Gửi yêu cầu dạng câu lệnh cho một mô hình

Phần này hướng dẫn bạn cách gửi nhiều loại dữ liệu đầu vào để tạo ra nhiều loại dữ liệu đầu ra, bao gồm:

Nếu bạn muốn tạo đầu ra có cấu trúc (chẳng hạn như JSON hoặc enum), hãy sử dụng một trong các ví dụ "tạo văn bản" sau đây và định cấu hình thêm mô hình để phản hồi theo một giản đồ được cung cấp.

Tạo văn bản từ dữ liệu đầu vào chỉ có văn bản

Trước khi thử mẫu này, hãy đảm bảo bạn đã hoàn tất phần Bắt đầu của hướng dẫn này.

Bạn có thể dùng generateContent() để tạo văn bản từ một câu lệnh có chứa văn bản:

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call `generateContent` with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Xin lưu ý rằng Firebase AI Logic cũng hỗ trợ truyền trực tuyến các câu trả lời bằng văn bản bằng cách sử dụng generateContentStream (thay vì generateContent).

Tạo văn bản từ dữ liệu đầu vào là văn bản và hình ảnh (đa phương thức)

Trước khi thử mẫu này, hãy đảm bảo bạn đã hoàn tất phần Bắt đầu của hướng dẫn này.

Bạn có thể dùng generateContent() để tạo văn bản từ một câu lệnh có chứa tệp văn bản và hình ảnh, bằng cách cung cấp mimeType của từng tệp đầu vào và chính tệp đó.

Các loại hình ảnh đầu vào được hỗ trợ cho suy luận trên thiết bị là PNG và JPEG.

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Xin lưu ý rằng Firebase AI Logic cũng hỗ trợ truyền trực tuyến các câu trả lời bằng văn bản bằng cách sử dụng generateContentStream (thay vì generateContent).

Cho phép người dùng cuối dùng thử tính năng của bạn

Để người dùng cuối dùng thử tính năng của bạn trong ứng dụng, bạn phải đăng ký tham gia chương trình Thử nghiệm nguồn gốc của Chrome. Xin lưu ý rằng các bản dùng thử này có thời lượng và phạm vi sử dụng có giới hạn.

  1. Đăng ký Bản dùng thử theo nguyên gốc Prompt API của Chrome. Bạn sẽ nhận được một mã thông báo.

  2. Cung cấp mã thông báo trên mọi trang web mà bạn muốn bật tính năng dùng thử. Dùng một trong các cách sau:

    • Cung cấp mã thông báo dưới dạng thẻ meta trong thẻ <head>: <meta http-equiv="origin-trial" content="TOKEN">

    • Cung cấp mã thông báo dưới dạng tiêu đề HTTP: Origin-Trial: TOKEN

    • Cung cấp mã thông báo theo phương thức lập trình.

Bạn có thể làm gì khác?

Bạn có thể sử dụng nhiều lựa chọn và chức năng cấu hình bổ sung cho trải nghiệm kết hợp của mình:

Các tính năng chưa có sẵn cho suy luận trên thiết bị

Vì là bản phát hành dùng thử, nên không phải tất cả các chức năng của Web SDK đều có sẵn cho suy luận trên thiết bị. Các tính năng sau đây hiện chưa được hỗ trợ cho suy luận trên thiết bị (nhưng thường có sẵn cho suy luận dựa trên đám mây).

  • Tạo văn bản từ các loại tệp hình ảnh đầu vào khác ngoài JPEG và PNG

    • Có thể dự phòng cho mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gặp lỗi.

  • Tạo văn bản từ dữ liệu đầu vào là âm thanh, video và tài liệu (chẳng hạn như tệp PDF)

    • Có thể dự phòng cho mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gặp lỗi.

  • Tạo hình ảnh bằng mô hình Gemini hoặc Imagen

    • Có thể dự phòng cho mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gặp lỗi.

  • Cung cấp tệp bằng URL trong các yêu cầu đa phương thức. Bạn phải cung cấp các tệp dưới dạng dữ liệu nội tuyến cho các mô hình trên thiết bị.

  • Cuộc trò chuyện nhiều lượt

    • Có thể dự phòng cho mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gặp lỗi.

  • Truyền phát trực tiếp hai chiều bằng Gemini Live API

  • Cung cấp cho mô hình các công cụ để giúp mô hình tạo ra phản hồi (chẳng hạn như gọi hàm, thực thi mã, ngữ cảnh URL, Cơ sở kiến thức bằng Google Search và Cơ sở kiến thức bằng Google Maps)

  • Đếm mã thông báo

    • Luôn báo lỗi. Số lượng sẽ khác nhau giữa các mô hình được lưu trữ trên đám mây và trên thiết bị, vì vậy, không có giải pháp dự phòng trực quan.

  • Tính năng giám sát AI trong bảng điều khiển Firebase để suy luận trên thiết bị.

    • Xin lưu ý rằng bạn có thể giám sát mọi suy luận bằng các mô hình được lưu trữ trên đám mây giống như các suy luận khác bằng SDK ứng dụng Firebase AI Logic cho Web.


Gửi ý kiến phản hồi về trải nghiệm của bạn với Firebase AI Logic