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

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

В этом выпуске доступен гибридный вывод с использованием клиентского SDK Firebase AI Logic для веб-сайтов с поддержкой вывода на устройстве для Chrome на настольных компьютерах.

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

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

Рекомендуемые варианты использования:

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

  • Повышенная конфиденциальность
  • Местный контекст
  • Вывод бесплатно
  • Оффлайн функциональность

• Использование гибридной функциональности обеспечивает:

  • Охватите 100% своей аудитории независимо от доступности модели устройства или наличия подключения к Интернету.

Поддерживаемые возможности и функции для вывода на устройстве:

• Однократная генерация контента, потоковая и непотоковая передача
• Генерация текста из текстового ввода
• Генерация текста из входных данных текста и изображения , в частности, из входных типов изображений JPEG и PNG
• Генерация структурированного вывода , включая JSON и перечисления

Начать

В этом руководстве показано, как начать использовать Firebase AI Logic SDK for Web для выполнения гибридного вывода.

Вывод с использованием модели на устройстве использует API Prompt из Chrome ; тогда как вывод с использованием модели, размещенной в облаке, использует выбранного вами поставщика API Gemini (либо API Gemini Developer , либо API Vertex AI Gemini ).

Начните разработку на локальном хосте, как описано в этом разделе (подробнее об использовании API на локальном хосте можно узнать в документации Chrome). После реализации функции вы можете при желании предоставить конечным пользователям возможность опробовать её .

Шаг 1 : Настройте Chrome и API Prompt для вывода данных на устройстве

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

2. Включите многомодальную модель на устройстве, установив следующий флаг в положение «Включено» :

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

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

4. (Необязательно) Загрузите локальную модель перед первым запросом.

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

   Просмотреть инструкции по загрузке модели на устройстве

   1. Откройте Инструменты разработчика > Консоль .

   2. Выполните следующее:

      await LanguageModel.availability();
      

   3. Убедитесь, что вывод available , downloading или downloadable .

   4. Если выходные данные downloadable , запустите загрузку модели, выполнив:

      await LanguageModel.create();
      

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

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

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

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

   У вас еще нет проекта Firebase?

   Если у вас еще нет проекта Firebase, нажмите кнопку, чтобы создать новый проект Firebase, а затем воспользуйтесь одним из следующих вариантов:

   • Вариант 1 : создайте совершенно новый проект Firebase (и его базовый проект Google Cloud автоматически), введя новое имя проекта на первом этапе рабочего процесса.

   • Вариант 2 : «Добавить Firebase» к существующему проекту Google Cloud , нажав «Добавить Firebase в проект Google Cloud» (внизу страницы). На первом этапе рабочего процесса начните вводить название существующего проекта, а затем выберите его из отобразившегося списка.

   Выполните оставшиеся шаги экранного рабочего процесса для создания проекта Firebase. Обратите внимание: при появлении соответствующего запроса вам не нужно настраивать Google Analytics для использования Firebase AI Logic SDK.

2. В консоли Firebase перейдите на страницу Firebase AI Logic .

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

4. Выберите поставщика Gemini API , который вы хотите использовать с Firebase AI Logic SDK. Для начинающих пользователей рекомендуется использовать Gemini Developer API . При желании вы всегда сможете добавить биллинг или настроить Vertex AI Gemini API позже.

   • API разработчика Gemini — оплата необязательна (доступно в бесплатном тарифном плане Spark, при желании можно перейти на более поздний вариант)
     Консоль включит необходимые API и создаст ключ API Gemini в вашем проекте.
     Не добавляйте этот ключ API Gemini в кодовую базу вашего приложения. Подробнее.

   • Vertex AI Gemini API — требуется выставление счетов (требуется тарифный план Blaze с оплатой по мере использования)
     Консоль поможет вам настроить биллинг и включить необходимые API в вашем проекте.

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

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

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

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

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

   npm install firebase
   

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

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

Шаг 4 : Инициализация службы и создание экземпляра модели

Перед отправкой запроса модели Gemini инициализируйте службу для выбранного вами поставщика API и создайте экземпляр GenerativeModel .

Установите один из mode :

• PREFER_ON_DEVICE : Настраивает SDK на использование модели на устройстве, если она доступна, или на возврат к модели, размещенной в облаке.

• ONLY_ON_DEVICE : Настраивает SDK на использование модели на устройстве или создание исключения.

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

• ONLY_IN_CLOUD : Настраивает SDK так, чтобы он никогда не использовал модель на устройстве.

При использовании PREFER_ON_DEVICE , PREFER_IN_CLOUD или ONLY_IN_CLOUD облачная модель по умолчанию gemini-2.0-flash-lite , но вы можете переопределить значение по умолчанию .

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 to use on-device model when possible
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

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

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

1. Зарегистрируйтесь для участия в пробной версии Prompt API Chrome Origin . Вам будет предоставлен токен.

2. Укажите токен на каждой веб-странице, для которой вы хотите включить пробную версию. Используйте один из следующих вариантов:

   • Укажите токен как метатег в теге <head> : <meta http-equiv="origin-trial" content=" TOKEN ">

   • Предоставьте токен как HTTP-заголовок: Origin-Trial: TOKEN

   • Предоставьте токен программным способом .

Используйте альтернативные режимы вывода

В приведенных выше примерах использовался режим PREFER_ON_DEVICE для настройки SDK на использование модели на устройстве (если она доступна) или переход к облачной модели. SDK предлагает три альтернативных режима вывода : ONLY_ON_DEVICE , ONLY_IN_CLOUD и PREFER_IN_CLOUD .

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

  const model = getGenerativeModel(ai, { mode: InferenceMode.ONLY_ON_DEVICE });
  

• Используйте режим ONLY_IN_CLOUD , чтобы SDK мог использовать только модель, размещенную в облаке.

  const model = getGenerativeModel(ai, { mode: InferenceMode.ONLY_IN_CLOUD });
  

• Используйте режим PREFER_IN_CLOUD , чтобы SDK пытался использовать модель, размещенную в облаке, но возвращался к модели на устройстве, если модель, размещенная в облаке, недоступна (например, устройство находится в автономном режиме).

  const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_IN_CLOUD });
  

Определите, использовался ли вывод на устройстве или в облаке.

Если вы используете режимы вывода PREFER_ON_DEVICE или PREFER_IN_CLOUD , может быть полезно знать, какой режим использовался для данных запросов. Эта информация предоставляется свойством inferenceSource каждого ответа (доступно начиная с JS SDK версии 12.5.0).

При доступе к этому свойству возвращаемое значение будет ON_DEVICE или IN_CLOUD .

// ...

console.log('You used: ' + result.response.inferenceSource);

console.log(result.response.text());

Облачная модель по умолчанию: gemini-2.0-flash-lite .

Эта модель является резервной облачной моделью при использовании режима PREFER_ON_DEVICE . Она также используется по умолчанию при использовании режимов ONLY_IN_CLOUD или PREFER_IN_CLOUD .

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

const model = getGenerativeModel(ai, {
  mode: InferenceMode.INFERENCE_MODE,
  inCloudParams: {
    model: "GEMINI_MODEL_NAME"
  }
});

const model = getGenerativeModel(ai, {
  mode: InferenceMode.INFERENCE_MODE,
  inCloudParams: {
    model: "GEMINI_MODEL_NAME"
    temperature: 0.8,
    topK: 10
  }
});

const model = getGenerativeModel(ai, {
  mode: InferenceMode.INFERENCE_MODE,
  onDeviceParams: {
    createOptions: {
      temperature: 0.8,
      topK: 8
    }
  }
});

import {
  getAI,
  getGenerativeModel,
  Schema
} from "firebase/ai";

const jsonSchema = Schema.object({
 properties: {
    characters: Schema.array({
      items: Schema.object({
        properties: {
          name: Schema.string(),
          accessory: Schema.string(),
          age: Schema.number(),
          species: Schema.string(),
        },
        optionalProperties: ["accessory"],
      }),
    }),
  }
});

const model = getGenerativeModel(ai, {
  mode: InferenceMode.INFERENCE_MODE,
  inCloudParams: {
    model: "gemini-2.5-flash"
    generationConfig: {
      responseMimeType: "application/json",
      responseSchema: jsonSchema
    },
  }
  onDeviceParams: {
    promptOptions: {
      responseConstraint: jsonSchema
    }
  }
});

// ...

const enumSchema = Schema.enumString({
  enum: ["drama", "comedy", "documentary"],
});

const model = getGenerativeModel(ai, {

// ...

    generationConfig: {
      responseMimeType: "text/x.enum",
      responseSchema: enumSchema
    },

// ...
});

// ...