Создавайте гибридные веб-приложения с моделями, размещенными на устройстве и в облаке

Вы можете создавать веб-приложения и функции на основе ИИ с гибридным выводом, используя Firebase AI Logic. Гибридный инференс позволяет выполнять инференс с использованием моделей на устройстве, когда они доступны, и плавно переключаться на модели, размещенные в облаке, в противном случае (и наоборот).

На этой странице рассказывается, как начать работу с клиентским SDK. После завершения стандартной настройки ознакомьтесь с дополнительными возможностями и параметрами конфигурации.

Обратите внимание, что вывод на устройстве с помощью Firebase AI Logic поддерживается для веб-приложений, использующих SDK Firebase AI Logic версии 12.5.0 или выше и работающих в Chrome на компьютере (версии 139 или выше).

Перейти к примерам кода

Варианты использования и поддерживаемые возможности

В зависимости от сценариев использования приложения вы можете воспользоваться несколькими преимуществами локальных или гибридных решений:

  • Преимущества использования модели на устройстве для вывода:

    • Повышенная конфиденциальность
    • Локальный контекст
    • Бесплатный вывод
    • Офлайн-функции

  • Преимущества гибридного подхода:

    • Обеспечить одинаковое удобство использования приложения независимо от устройства конечного пользователя
    • Улучшить доступность функций на основе генеративного ИИ независимо от подключения к интернету, ограничений квот и возможностей устройства.

Поддерживаемые возможности вывода на устройстве

Вывод на устройстве поддерживает только одноэтапную генерацию текста (не чат) (с потоковым или непотоковым выводом), в частности следующие возможности:

Обязательно ознакомьтесь со списком функций, которые пока не поддерживаются при гибридном выводе и выводе на устройстве, внизу этой страницы.

Поддерживаемые API и платформы

В разделах ниже описаны поддерживаемые API, платформы и браузеры.

Поддерживаемые API для вывода в облаке и на устройстве

  • Для инференса в облаке используется выбранный вами поставщик Gemini API (Gemini Developer API или Agent Platform Gemini API (formerly Vertex AI)).

  • Для локального вывода используется Prompt API из Chrome.

Поддерживаемые платформы и браузеры

Для выполнения вычислений на устройстве (с использованием Prompt API из Chrome) у конечного пользователя вашего приложения должен быть установлен Chrome для компьютеров (версии 139 или более поздней). Подробные сведения можно найти в документации Chrome.

Начало работы с localhost

В этом разделе описаны общие действия, которые нужно выполнить, чтобы отправить любой поддерживаемый запрос.

Подробнее о том, как использовать API на локальном хосте, рассказывается в документации Chrome.

Шаг 1. Настройте Chrome и Prompt API для локального инференса

  1. Убедитесь, что вы используете последнюю версию Chrome. Обновите браузер на странице chrome://settings/help.
    Вывод на устройстве доступен в Chrome 139 и более поздних версиях.

  2. Включите мультимодальную модель на устройстве, установив для следующего параметра значение Enabled (Включено):

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

  3. Перезапустите Chrome.

  4. Необязательно. Скачайте модель на устройство до первого запроса.

    Prompt API встроен в Chrome, но модель на устройстве по умолчанию недоступна. Если вы не скачали модель до первого запроса на инференс на устройстве, запрос автоматически запустит скачивание модели в фоновом режиме.

Шаг 2. Настройте проект Firebase и подключите к нему приложение

  1. Войдите в консоль Firebase и выберите проект Firebase.

  2. В консоли Firebase выберите AI Services (Сервисы ИИ) > AI Logic (Логика ИИ).

  3. Нажмите Начать, чтобы запустить пошаговый рабочий процесс, который поможет вам настроить необходимые API и ресурсы для проекта.

  4. Если появится запрос, следуйте инструкциям на экране, чтобы зарегистрировать приложение и добавить в него конфигурацию Firebase.

  5. Когда вам будет предложено выбрать поставщика Gemini API, рекомендуем выбрать Gemini Developer API. Это позволит вам быстро начать работу без дополнительных затрат.

    Вы можете в любой момент настроить Agent Platform Gemini API (formerly Vertex AI) (и платежные данные, если они требуются).

  6. Продолжите настройку необходимых API и связанных сервисов для Firebase AI Logic.

    На этом этапе автоматически включается Firebase App Check для AI Logic. Это критически важный сервис, который помогает защитить Gemini API при прямом доступе из приложения. В рамках начала работы (см. шаги далее в этом руководстве) вам нужно будет настроить отладочный поставщик App Check для локальной разработки, когда включена App Check.

  7. Перейдите к следующему шагу этого руководства, чтобы добавить в приложение необходимые SDK.

Шаг 3. Добавьте SDK

Библиотека Firebase предоставляет доступ к API для взаимодействия с генеративными моделями. Библиотека входит в состав Firebase JavaScript SDK для веб-приложений.

  1. Установите Firebase JS SDK для Web с помощью npm:

    npm install firebase

  2. Инициализируйте Firebase в приложении:

    import { initializeApp } from "firebase/app";
import { initializeAppCheck } 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);

Шаг 4. Настройте отладочный поставщик App Check для локальной разработки

В рамках пошаговой настройки AI Logic в консоли автоматически применяется Firebase App Check для защиты Gemini API. Для локальной разработки необходимо настроить App Check отладочный поставщик, чтобы обходить проверку, сохраняя при этом принудительное применение App Check.

Вот как использовать отладочный поставщик при интерактивном запуске приложения из localhost (например, во время локальной разработки):

  1. В отладочной сборке включите режим отладки, задав для self.FIREBASE_APPCHECK_DEBUG_TOKEN значение true перед инициализацией App Check. Пример:

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

  2. Откройте веб-приложение на своем компьютере и запустите инструменты разработчика в браузере. В консоли отладки вы увидите токен отладки:

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

  3. Зарегистрируйте токен отладки в App Check:

    1. В консоли Firebase перейдите в раздел Security (Безопасность) > App Check (Проверка приложений) > Apps (Приложения).

    2. Найдите приложение, нажмите на значок дополнительного меню () и выберите Управление токенами отладки.

    3. Зарегистрируйте токен отладки, следуя инструкциям на экране.

Подробную информацию об отладочном поставщике, в том числе о том, как получить новый токен отладки, можно найти в официальной документации App Check.

Шаг 5. Инициализируйте сервис и создайте экземпляр модели

Нажмите на название своего поставщика Gemini API, чтобы посмотреть контент и код, относящиеся к нему.

Прежде чем отправлять запрос модели, настройте следующее:

  1. Инициализируйте сервис для выбранного поставщика API.

  2. Создайте экземпляр GenerativeModel. Убедитесь, что для mode задано одно из следующих значений:

    • PREFER_ON_DEVICE – использовать модель на устройстве, если она доступна. В противном случае использовать облачную модель.

    • ONLY_ON_DEVICE – использовать модель на устройстве, если она доступна, в противном случае выдать исключение.

    • PREFER_IN_CLOUD – использовать облачную модель, если она доступна, в противном случае использовать модель на устройстве.

    • ONLY_IN_CLOUD – использовать облачную модель, если она доступна, в противном случае выдать исключение.

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 });

Шаг 6. Инициализируйте модель на устройстве

Вызывать initializeDeviceModel() нужно после или во время взаимодействия конечного пользователя со страницей (например, нажатия кнопки) и до отправки запроса модели. Подробнее о требовании активации пользователем…

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}%`)
);

Шаг 7. Отправьте запрос модели

В этом разделе показано, как отправлять различные типы входных данных для генерации различных типов выходных данных, в том числе:

Если вы хотите сгенерировать структурированные выходные данные (например, JSON или перечисления), используйте один из следующих примеров генерации текста и дополнительно настройте модель для ответа в соответствии с предоставленной схемой.

Генерировать текст на основе текстового запроса

Прежде чем использовать этот пример, убедитесь, что вы выполнили инструкции из раздела Начало работы этого руководства.

Вы можете использовать generateContent(), чтобы генерировать текст на основе запроса, содержащего текст.

// 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();

Обратите внимание, что Firebase AI Logic также поддерживает потоковую передачу текстовых ответов с помощью generateContentStream (вместо generateContent).

Как генерировать текст на основе текста и изображения (мультимодальный ввод)

Прежде чем использовать этот пример, убедитесь, что вы выполнили инструкции из раздела Начало работы этого руководства.

Вы можете использовать generateContent(), чтобы генерировать текст на основе запроса, содержащего текстовые и графические файлы. Для этого нужно указать mimeType каждого входного файла и сам файл.

Поддерживаемые типы входных изображений для инференса на устройстве – PNG и 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 {
    type: "inlineData",
    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();

Обратите внимание, что Firebase AI Logic также поддерживает потоковую передачу текстовых ответов с помощью generateContentStream (вместо generateContent).

Что ещё ты умеешь делать?

Для гибридных экспериментов доступны различные дополнительные параметры и возможности:

Функции, которые пока не поддерживаются

Не все возможности Web SDK или облачных моделей доступны для гибридного или локального инференса.

Функции, которые пока не поддерживаются в гибридных реализациях

Следующие функции нельзя использовать в гибридных реализациях (ни на устройстве, ни через облако):

  • Gemini Live API Двунаправленная потоковая передача в реальном времени не поддерживается.

  • Шаблоны запросов к серверу. Управляемые шаблоны запросов к серверу не поддерживаются.

  • Подсчет токенов. Не полагайтесь на подсчет токенов, так как их количество будет отличаться в облачных моделях и моделях на устройстве. Поэтому интуитивно понятного резервного варианта нет.

Функции, которые пока не поддерживаются для инференса на устройстве

Следующие функции пока не поддерживаются для локального вывода, но доступны для облачных моделей:

  • Генерирование изображений с помощью моделей Gemini Nano Banana

    • Можно использовать облачную модель, но в режиме ONLY_ON_DEVICE будет возникать ошибка.

  • Генерировать текст на основе изображений в форматах, отличных от JPEG и PNG.

    • Можно использовать облачную модель, но в режиме ONLY_ON_DEVICE будет возникать ошибка.

  • Генерировать текст на основе мультимодальных входных данных, таких как аудио, видео и документы (PDF).

    • Можно использовать облачную модель, но в режиме ONLY_ON_DEVICE будет возникать ошибка.

  • Предоставление файлов с использованием URL-адресов в мультимодальных запросах. Файлы необходимо передавать в локальные модели в виде встроенных данных.

  • Многоэтапный чат

    • Можно использовать облачную модель, но в режиме ONLY_ON_DEVICE будет возникать ошибка.

  • Предоставление модели инструментов, которые помогают ей генерировать ответы. К таким инструментам относятся вызов функций, выполнение кода, URL-контекст, обоснование с помощью Google Search и обоснование с помощью Google Maps.

  • ИИ-мониторинг в консоли Firebase не показывает данные о выводе на устройстве (включая журналы на устройстве). Однако любой инференс, в котором используется модель, размещенная в облаке, можно отслеживать так же, как и другие инференсы, с помощью Firebase AI Logic.

Дополнительные ограничения

Помимо перечисленного выше, у вывода на устройстве есть следующие ограничения:

  • Конечный пользователь вашего приложения должен использовать Chrome на компьютере (версии 139 или выше) с включенными необходимыми флагами.

  • Для первоначальной загрузки модели на устройстве пользователя требуется достаточно места.


Оставьте отзыв о работе с Firebase AI Logic