Информировать пользователей о загрузке модели

Thomas Steiner

Опубликовано: 1 октября 2025 г.

Прежде чем использовать какие-либо встроенные API ИИ , необходимо загрузить базовую модель и любые настройки (например, тонкую подгонку), извлечь сжатые данные и загрузить все это в память. Рекомендуется предупреждать пользователя о времени, необходимом для выполнения этих загрузок.

В приведенных ниже примерах используется API Prompt , но эти принципы применимы ко всем другим встроенным API для искусственного интеллекта .

Отслеживайте и делитесь информацией о ходе загрузки.

В каждом встроенном API для ИИ используется функция create() для начала сессии. Функция create() имеет опцию monitor , позволяющую отслеживать ход загрузки и делиться им с пользователем.

Встроенные API для ИИ разработаны для клиентской части , где данные обрабатываются в браузере и на устройстве пользователя, однако некоторые приложения позволяют обрабатывать данные на сервере. Способ взаимодействия с пользователем в процессе загрузки модели зависит от вопроса: должна ли обработка данных выполняться только локально или нет? Если да, то ваше приложение предназначено только для клиентской части. Если нет, то можно использовать гибридную реализацию .

Только на стороне клиента

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

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

<style>
  progress[hidden] ~ label {
    display: none;
  }
</style>

<button type="button">Create LanguageModel session</button>
<progress hidden id="progress" value="0"></progress>
<label for="progress">Model download progress</label>

Для корректной работы потребуется немного JavaScript. Код сначала сбрасывает интерфейс прогресса в исходное состояние (прогресс скрыт и равен нулю), проверяет, поддерживается ли API вообще, а затем проверяет доступность API :

• API 'unavailable' : ваше приложение нельзя использовать на стороне клиента на этом устройстве. Предупредите пользователя о недоступности этой функции.
• API 'available' : API можно использовать немедленно, нет необходимости отображать индикатор выполнения.
• API находится в 'downloadable' или 'downloading' : API можно использовать после завершения загрузки. Отображайте индикатор выполнения и обновляйте его при каждом срабатывании события downloadprogress . После загрузки отображайте неопределенное состояние, чтобы сообщить пользователю, что браузер извлекает модель и загружает ее в память.

const createButton = document.querySelector('.create');
const promptButton = document.querySelector('.prompt');
const progress = document.querySelector('progress');
const output = document.querySelector('output');

let sessionCreationTriggered = false;
let localSession = null;

const createSession = async (options = {}) => {
  if (sessionCreationTriggered) {
    return;
  }

  progress.hidden = true;
  progress.value = 0;

  try {
    if (!('LanguageModel' in self)) {
      throw new Error('LanguageModel is not supported.');
    }

    const availability = await LanguageModel.availability({
      // ⚠️ Always pass the same options to the `availability()` function that
      // you use in `prompt()` or `promptStreaming()`. This is critical to
      // align model language and modality capabilities.
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    if (availability === 'unavailable') {
      throw new Error('LanguageModel is not available.');
    }

    let modelNewlyDownloaded = false;
    if (availability !== 'available') {
      modelNewlyDownloaded = true;
      progress.hidden = false;
    }
    console.log(`LanguageModel is ${availability}.`);
    sessionCreationTriggered = true;

    const llmSession = await LanguageModel.create({
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          progress.value = e.loaded;
          if (modelNewlyDownloaded && e.loaded === 1) {
            // The model was newly downloaded and needs to be extracted
            // and loaded into memory, so show the undetermined state.
            progress.removeAttribute('value');
          }
        });
      },
      ...options,
    });

    sessionCreationTriggered = false;
    return llmSession;
  } catch (error) {
    throw error;
  } finally {
    progress.hidden = true;
    progress.value = 0;
  }
};

createButton.addEventListener('click', async () => {
  try {
    localSession = await createSession({
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    promptButton.disabled = false;
  } catch (error) {
    output.textContent = error.message;
  }
});

promptButton.addEventListener('click', async () => {
  output.innerHTML = '';
  try {
    const stream = localSession.promptStreaming('Write me a poem');
    for await (const chunk of stream) {
      output.append(chunk);
    }
  } catch (err) {
    output.textContent = err.message;
  }
});

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

Демонстрация на стороне клиента

Посмотрите демонстрацию , показывающую этот процесс в действии. Если встроенный API ИИ (в этом примере — API подсказок) недоступен, приложение использовать нельзя. Если встроенную модель ИИ еще нужно загрузить, пользователю отображается индикатор выполнения. Исходный код можно посмотреть на GitHub.

Гибридная реализация

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

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

Гибридная демонстрация

Демонстрация показывает этот процесс в действии. Если встроенный API ИИ недоступен, демонстрация переключается на API Gemini в облаке. Если встроенную модель еще нужно загрузить, пользователю отображается индикатор выполнения, и приложение использует API Gemini в облаке до тех пор, пока модель не будет загружена. Полный исходный код можно посмотреть на GitHub .

Заключение

К какой категории относится ваше приложение? Требуется ли вам 100% обработка на стороне клиента или можно использовать гибридный подход? После того, как вы ответите на этот вопрос, следующим шагом будет внедрение стратегии загрузки модели, которая лучше всего подходит для вас.

Убедитесь, что ваши пользователи всегда знают, когда и можно ли использовать ваше приложение на стороне клиента, отображая им ход загрузки модели, как описано в этом руководстве.

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