Docker и nginx: правильные заголовки для SharedArrayBuffer

ONNX Runtime Web (ORT Web) представляет собой JavaScript-библиотеку для выполнения моделей ONNX непосредственно в браузере или в Node.js. Основное преимущество заключается в возможности использовать аппаратное ускорение через WebAssembly (WASM) или WebGL, что обеспечивает высокую производительность при инференсе нейросетевых моделей.

Для подключения библиотеки в проект можно использовать пакет из npm:

npm install onnxruntime-web

Импорт библиотеки в модуль JavaScript осуществляется через:

import * as ort from 'onnxruntime-web';

Инициализация сессии модели

Сессия модели в ONNX Runtime Web создается с использованием объекта InferenceSession. Основные параметры инициализации включают путь к файлу модели и предпочтительный бэкэнд (webgl или wasm):

const session = await ort.InferenceSession.create('model.onnx', {
  executionProviders: ['webgl'] // или 'wasm'
});

Важно: webgl обеспечивает ускорение на GPU, но требует поддержки браузером WebGL 2.0. wasm работает на всех современных браузерах и подходит для CPU-инференса.

Подготовка входных данных

Для передачи данных в модель используется объект ort.Tensor. ONNX Runtime Web поддерживает типы float32, int32, bool и другие. Пример создания тензора:

const input = new ort.Tensor('float32', new Float32Array([1.0, 2.0, 3.0, 4.0]), [2, 2]);
  • Первый аргумент — тип данных (float32, int32 и др.).
  • Второй аргумент — массив данных.
  • Третий аргумент — форма тензора.

Выполнение инференса

Инференс выполняется через метод run объекта сессии. Входные данные передаются в виде словаря, где ключи соответствуют именам входных тензоров модели:

const feeds = { input_name: input };
const results = await session.run(feeds);

Выходные данные доступны по ключам, соответствующим именам выходных тензоров модели:

const outputTensor = results['output_name'];
console.log(outputTensor.data);

Настройка SharedArrayBuffer в браузере

Для ускорения вычислений и использования многопоточности ONNX Runtime Web применяет SharedArrayBuffer. Для его работы необходимо, чтобы сервер возвращал правильные HTTP-заголовки.

Необходимые заголовки

  1. Cross-Origin-Opener-Policy (COOP)
Cross-Origin-Opener-Policy: same-origin
  1. Cross-Origin-Embedder-Policy (COEP)
Cross-Origin-Embedder-Policy: require-corp

Эти заголовки позволяют браузеру безопасно использовать SharedArrayBuffer для многопоточных WebAssembly-операций.

Настройка nginx для поддержки SharedArrayBuffer

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

server {
    listen 80;
    server_name example.com;

    root /var/www/html;

    location / {
        add_header Cross-Origin-Opener-Policy same-origin;
        add_header Cross-Origin-Embedder-Policy require-corp;
        try_files $uri $uri/ =404;
    }

    location /models/ {
        add_header Cross-Origin-Opener-Policy same-origin;
        add_header Cross-Origin-Embedder-Policy require-corp;
    }

    location /static/ {
        add_header Cross-Origin-Opener-Policy same-origin;
        add_header Cross-Origin-Embedder-Policy require-corp;
    }
}

Особенности настройки:

  • Заголовки должны быть добавлены на все ресурсы, которые будут загружены скриптами и моделями.
  • Использование try_files гарантирует корректную отдачу файлов без перенаправлений, которые могут сбросить заголовки.
  • Любой кросс-доменный доступ к ресурсам должен учитывать политику COEP/COOP.

Оптимизация производительности

  • Предпочтение WebGL при наличии GPU позволяет ускорить инференс.
  • Использование тензоров с заранее выделенной памятью минимизирует накладные расходы.
  • В браузерах с поддержкой SharedArrayBuffer многопоточный WASM значительно снижает время выполнения больших моделей.

Интеграция с фронтендом

ONNX Runtime Web может быть использован совместно с React, Vue или другими фреймворками. Основная схема работы:

  1. Загружается модель через InferenceSession.create.
  2. Создаются входные тензоры на основе данных пользователя.
  3. Выполняется session.run с подготовленными входными данными.
  4. Вывод используется для визуализации или последующих вычислений.

Важным моментом является обеспечение, чтобы заголовки COOP и COEP были правильно настроены, иначе SharedArrayBuffer будет недоступен, что приведет к падению многопоточного режима и замедлению работы модели.

Примеры расширенных сценариев

  • Обработка изображений: загрузка изображения в <canvas>, преобразование в массив Float32Array, создание тензора и передача в модель для классификации.
  • Многомодельный инференс: использование нескольких сессий параллельно с разделением потоков через SharedArrayBuffer.
  • Оптимизация под Web Workers: создание воркеров для выполнения модели в фоновом потоке, минимизация блокировки главного потока интерфейса.

Эти методы позволяют максимально эффективно использовать возможности ONNX Runtime Web при работе с нейросетевыми моделями в браузере.

Оглавление