Webpack и настройка для ONNX Runtime Web

ONNX Runtime Web (ORT Web) предоставляет возможность выполнять модели машинного обучения прямо в браузере с использованием JavaScript. Для интеграции ORT Web в современные фронтенд-приложения часто применяется сборщик модулей Webpack. Настройка Webpack требует внимания к особенностям работы с WebAssembly (WASM), ESM и различными типами активов.

Установка зависимостей

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

npm install onnxruntime-web
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev

onnxruntime-web предоставляет несколько бандлов: стандартный JavaScript-бандл, WebAssembly и WebGL. Выбор конкретного бандла определяется производительностью и совместимостью с устройствами.

Конфигурация Webpack

Файл конфигурации webpack.config.js должен учитывать следующие аспекты:

  1. Обработка JavaScript и ESM Для корректной работы с современным синтаксисом и импортами ES6:
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
  },
};
  1. Поддержка WebAssembly ORT Web использует WASM для ускорения вычислений. Webpack начиная с версии 5 имеет встроенную поддержку WASM. Для этого необходимо убедиться, что используется тип async при импорте:
import * as ort from 'onnxruntime-web';

async function loadModel() {
  const session = await ort.InferenceSession.create('./model.onnx');
  return session;
}

В конфигурации Webpack можно явно указать обработку WASM:

experiments: {
  asyncWebAssembly: true,
},
  1. Загрузка ассетов моделей Файлы .onnx не являются стандартными модулями JavaScript. Для их использования можно настроить загрузку через file-loader:
module: {
  rules: [
    {
      test: /\.onnx$/,
      type: 'asset/resource',
    },
  ],
},

После этого файлы моделей будут копироваться в dist, и к ним можно будет обращаться через URL:

const modelUrl = new URL('./model.onnx', import.meta.url).href;
const session = await ort.InferenceSession.create(modelUrl);
  1. Использование WebGL Execution Provider WebGL ускоряет инференс на GPU браузера. Для включения:
const session = await ort.InferenceSession.create(modelUrl, {
  executionProviders: ['webgl'],
});

Если WebGL недоступен, ORT Web автоматически переключается на WASM.

Оптимизация сборки

  • Минификация и tree shaking При сборке для продакшена рекомендуется включать mode: 'production'. ORT Web поддерживает ESM, что позволяет Webpack удалять неиспользуемый код.

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

async function loadDynamicModel(path) {
  const { default: ort } = await import('onnxruntime-web');
  return ort.InferenceSession.create(path);
}
  • Кеширование WASM и моделей Для ускорения повторного запуска инференса стоит использовать Service Worker или встроенные механизмы кэширования браузера.

Проблемы совместимости

  • Разные браузеры по-разному поддерживают WebAssembly и WebGL. Всегда проверяется fallback на WASM CPU.
  • Пути к моделям должны быть абсолютными или вычисляемыми через URL с import.meta.url.
  • Асинхронная загрузка обязательна для WASM и WebGL, синхронный require не поддерживается.

Интеграция с другими библиотеками

ORT Web хорошо сочетается с библиотеками визуализации и управления состоянием, такими как React или Vue, при этом загрузка модели и выполнение инференса должны выполняться в асинхронных эффектах (например, useEffect в React) для предотвращения блокировки основного потока.

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

Оглавление