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

Thomas Steiner

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

Прежде чем использовать любой из встроенных 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 '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 session = 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();
    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 Prompt) недоступен, приложение не может быть использовано. Если встроенную модель ИИ ещё необходимо загрузить, пользователю отображается индикатор хода выполнения. Исходный код доступен на GitHub.

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

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

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

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

Заключение

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

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

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