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

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

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

Обратите внимание, что вывод данных на устройстве поддерживается для веб-приложений, работающих в Chrome на настольных компьютерах .

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

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

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

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

  • Повышенная конфиденциальность
  • Локальный контекст
  • Выводы без затрат
  • Автономная функциональность

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

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

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

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

Прежде чем начать

Обратите внимание на следующее:

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

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

• После внедрения функции вы можете предоставить конечным пользователям возможность протестировать её в вашем реальном приложении.

Начните работу на локальном компьютере.

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

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

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

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

   • 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. Для отслеживания хода загрузки и проверки available модели перед отправкой запросов можно использовать следующую функцию обратного вызова monitor :

      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 для использования SDK Firebase AI Logic .

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

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

4. Настройте свой проект для использования поставщика " Gemini API ".

   Мы рекомендуем начать работу с использованием API Gemini Developer . В любой момент вы всегда можете настроить API Vertex AI Gemini (и необходимые для выставления счетов параметры).

   Для доступа к Gemini Developer API консоль активирует необходимые API и создаст ключ Gemini API в вашем проекте.
   Не добавляйте этот API-ключ Gemini в код вашего приложения. Узнайте больше.

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

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

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

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

1. Установите Firebase JS SDK для веб-разработки с помощью 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 : Инициализируйте сервис и создайте экземпляр модели.

Перед отправкой запроса модели выполните следующие действия.

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

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

   1. Вызовите getGenerativeModel после или при взаимодействии с конечным пользователем (например, при нажатии кнопки). Это является необходимым условием для inferenceMode .

   2. Установите один из следующих 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
// Call `getGenerativeModel` after or on an end-user interaction
// Set the mode (for example, use the on-device model if it's available)
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 , но это лишь один из четырех доступных режимов вывода .

• PREFER_ON_DEVICE : Использовать модель, размещенную на устройстве, если она доступна; в противном случае, вернуться к модели, размещенной в облаке .

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

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

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

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

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

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

  const model = getGenerativeModel(ai, { mode: InferenceMode.ONLY_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.5-flash-lite (начиная с JS SDK v12.8.0).

Эта модель является резервной облачной моделью при использовании режима 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
    },

// ...
});

// ...