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 tính năng suy luận kết hợp thông qua Firebase AI Logic. Tính năng suy luận kết hợp cho phép chạy tính năng 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 (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 quy trình thiết lập tiêu chuẩn này, hãy xem các tuỳ chọn và tính năng cấu hình bổ sung (như đầu ra có cấu trúc).

Xin lưu ý rằng tính nă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ã

Trường hợp sử dụng được đề xuất và tính năng được hỗ trợ

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

  • Việc sử dụng mô hình trên thiết bị để suy luận mang lại:

    • 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

  • Việc sử dụng chức năng kết hợp mang lại:

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

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

Tính năng 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 trò chuyện), với đầu ra phát trực tuyến hoặc không phát trực tuyến. Tính năng này hỗ trợ các chức 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 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ả quy trình thiết lập chung bắt buộc cho mọi yêu cầu 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 cho tính năng suy luận trên thiết bị

  1. Đảm bảo bạn đang sử dụng phiên bản Chrome gần đây. Cập nhật trong chrome://settings/help.
    Tính năng 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:

    • 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, mô hình trên thiết bị không có sẵn theo mặc định. Nếu bạn chưa tải mô hình xuống trước yêu cầu đầu tiên về tính năng 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 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 Dịch vụ AI > AI Logic.

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

  4. Thiết lập dự án để sử dụng nhà cung cấp "Gemini API".

    Bạn nên bắt đầu sử dụng Gemini Developer API. Bất cứ lúc nào, bạn cũng có thể thiết lập Vertex AI Gemini API (và yêu cầu thanh toán của API này).

    Đối với Gemini Developer API, bảng điều khiển sẽ bật các API cần thiết và tạo khoá Gemini API trong dự án của bạn.
    Không thêm khoá Gemini API này vào cơ sở mã của ứng dụng. Tìm hiểu thêm.

  5. Nếu được nhắc trong quy trình của bảng điều khiển, hãy làm theo hướng dẫn trên màn hình để đăng ký ứng dụng và kết nối ứng dụng đó với Firebase.

  6. Tiếp tục bước tiếp theo trong hướng dẫn này để thêm SDK 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 làm một phần của SDK JavaScript của Firebase cho Web.

  1. Cài đặt SDK JavaScript Firebase 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";

// 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 4: Khởi động dịch vụ và tạo thực thể mô hình

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

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

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

  2. Tạo thực thể GenerativeModel. Hãy nhớ đặt mode thành một trong các giá trị sau:

    • PREFER_ON_DEVICE: Sử dụng mô hình trên thiết bị nếu có; nếu không, hãy chuyển về 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ây ra 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 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 động mô hình trên thiết bị

Bạn phải gọi initializeDeviceModel() sau hoặc trên một lượt tương tác trên trang của 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 câu lệnh đế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 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 câu lệnh đến 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 nhiều loại đầu ra, bao gồm:

Nếu bạn muốn tạo đầu ra có cấu trúc (như JSON hoặc enum), thì 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 rằng bạn đã hoàn tất phần Bắt đầu của hướng dẫn này.

Bạn có thể sử 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ợ phát trực tuyến các phản hồ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 có 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 rằng bạn đã hoàn tất phần Bắt đầu của hướng dẫn này.

Bạn có thể sử 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 – 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 tính năng 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ợ phát trực tuyến các phản hồ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ý dùng thử Chrome Origin. 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 hạn chế.

  1. Đăng ký dùng thử Chrome Origin cho Prompt API. Bạn sẽ được cấp 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> tag: <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ì nữa?

Bạn có thể sử dụng nhiều tuỳ chọn và tính 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ó cho tính năng suy luận trên thiết bị

Là bản phát hành xem trước, không phải tất cả các tính năng của SDK Web đều có sẵn cho tính năng suy luận trên thiết bị. Các tính năng sau đây chưa được hỗ trợ cho tính năng suy luận trên thiết bị (nhưng thường có cho tính năng 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ông phải là JPEG và PNG

    • Có thể chuyển về mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gây ra lỗi.

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

    • Có thể chuyển về mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gây ra lỗi.

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

    • Có thể chuyển về mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gây ra 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 tệp dưới dạng dữ liệu nội tuyến cho các mô hình trên thiết bị.

  • Trò chuyện nhiều lượt

    • Có thể chuyển về mô hình được lưu trữ trên đám mây; tuy nhiên, chế độ ONLY_ON_DEVICE sẽ gây ra lỗi.

  • Phát trực tuyến 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 phản hồi (như gọi hàm, thực thi mã, bối cảnh URL, Grounding with Google Search, và Grounding with Google Maps)

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

    • Luôn gây ra 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à mô hình trên thiết bị, vì vậy, không có cơ chế dự phòng trực quan.

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

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


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