Запуск LLM в браузере: WebLLM, Transformers.js и ONNX Runtime Web в 2026 году

LLM Больше Не Нужны Серверы

GPT-4 требует облачных API? Это мышление 2024 года. К 2026 году модели на 7B параметров работают плавно в браузере, и ваши данные никогда не покидают ваше устройство.

Конфиденциальность + Нулевая стоимость + Офлайн = Три главных преимущества браузерного ИИ

Хронология Эволюции Браузерного ИИ

2023 Q4    WebLLM запущен, Llama 2 на 2 tok/s в браузере
2024 Q2    Transformers.js выпущен, экосистема Hugging Face подключена
2024 Q4    Полная поддержка WebGPU, ускорение вывода в 5 раз
2025 Q2    ONNX Runtime Web поддерживает WebGPU, корпоративный уровень
2025 Q4    Прорыв в квантизации, модели 7B сжаты до 3 ГБ
2026 Q2    Gemma 3 4B достигает 25 tok/s в браузере — точка перелома по качеству

Три Фреймворка Сравнение

Фреймворк	Фокус	Ключевая технология	Лучше всего для
WebLLM	Высокопроизводительный вывод LLM	WebGPU + MLCEngine	Чат, автодополнение кода
Transformers.js	Полный стек ML-вывода	ONNX + WASM/WebGPU	NLP, зрение, аудио
ONNX Runtime Web	Корпоративный движок вывода	ONNX + WebGPU/WASM	Продакшен-развёртывание

WebLLM — Король Производительности Браузерных LLM

Архитектура

┌──────────────────────────────────────────────────┐
│                  Слой приложения                  │
│   Чат UI │ Автодополнение │ Резюмирование │ ...   │
├──────────────────────────────────────────────────┤
│              Движок WebLLM                        │
│   ChatModule │ Pipeline │ Tokenizer │ Scheduler   │
├──────────────────────────────────────────────────┤
│              MLCEngine (Оптимизация компиляции)   │
│   Model Compile │ Kernel Opt │ Quantization       │
├──────────────────────────────────────────────────┤
│              Среда выполнения WebGPU              │
│   Compute Shader │ GPU Buffer │ Pipeline State    │
└──────────────────────────────────────────────────┘

Быстрый Старт

import { CreateMLCEngine } from "@mlc-ai/web-llm";

const engine = await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC", {
  initProgressCallback: (progress) => {
    console.log(`Loading: ${(progress.progress * 100).toFixed(1)}%`);
  },
});

const reply = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful AI assistant." },
    { role: "user", content: "Write a quicksort in TypeScript" },
  ],
  temperature: 0.7,
  max_tokens: 1024,
  stream: true,
});

for await (const chunk of reply) {
  process.stdout.write(chunk.choices[0]?.delta?.content || "");
}

Поддерживаемые Модели и Производительность (Июнь 2026)

Модель	Параметры	Квантованный размер	Скорость (tok/s)	Первая загрузка
Gemma 3 4B IT	4B	2.3 ГБ	25	8с
Phi-4 Mini	3.8B	2.1 ГБ	28	7с
Qwen2.5 3B	3B	1.8 ГБ	32	6с
SmolLM2 1.7B	1.7B	1.0 ГБ	45	4с
Qwen2.5 0.5B	0.5B	0.4 ГБ	85	2с

Тестовая среда: M3 MacBook Pro / Chrome 126 / WebGPU

Transformers.js — Экосистема Hugging Face в Браузере

Ключевое Преимущество: Самая Богатая Экосистема Моделей

import { pipeline } from "@xenova/transformers";

const classifier = await pipeline("text-classification", "Xenova/distilbert-base-uncased-finetuned-sst-2-english");
const result = await classifier("This browser AI is amazing!");
// [{ label: "POSITIVE", score: 0.9998 }]

Поддерживаемые Пайплайны

Пайплайн	Вариант использования	Пример модели
text-classification	Анализ тональности	distilbert-sst2
question-answering	Система вопросов и ответов	distilbert-qa
summarization	Резюмирование	distilbart-cnn
translation	Перевод	opus-mt-en-zh
image-classification	Классификация изображений	vit-base-patch16
automatic-speech-recognition	Распознавание речи	whisper-tiny

ONNX Runtime Web — Корпоративный Движок Вывода

Базовое Использование

import ort from "onnxruntime-web";

async function runInference(modelPath: string, input: Float32Array) {
  const session = await ort.InferenceSession.create(modelPath, {
    executionProviders: ["webgpu", "wasm"],
    graphOptimizationLevel: "all",
  });

  const inputTensor = new ort.Tensor("float32", input, [1, input.length]);
  const results = await session.run({ input: inputTensor });
  return results.output.data;
}

Стратегия Выбора Провайдера

function getBestProvider(): string {
  if (navigator.gpu) return "webgpu";
  if (document.createElement("canvas").getContext("webgl2")) return "webgl";
  return "wasm";
}

Бенчмарки Производительности: Полное Сравнение

Вывод LLM (Gemma 3 4B, 4-битная квантизация)

Метрика	WebLLM	Transformers.js	ONNX Runtime Web
Скорость (tok/s)	25	18	22
Первая загрузка	8с	12с	10с
Память	3.2 ГБ	3.8 ГБ	3.5 ГБ
Стриминг	✅	✅	❌
Совместимость с OpenAI API	✅	❌	❌

Стратегии Продакшен-Развёртывания

Изящная Деградация

async function createEngineWithFallback() {
  if (navigator.gpu) {
    try { return await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC"); }
    catch (e) { console.warn("WebGPU failed, falling back to smaller model"); }
  }
  try { return await CreateMLCEngine("SmolLM2-1.7B-q4f16_1-MLC"); }
  catch (e) { console.warn("Small model failed, falling back to API"); }
  return new APIFallbackEngine({ endpoint: "/api/chat" });
}

Офлайн-Поддержка через Service Worker

const MODEL_CACHE = "ai-models-v1";
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(MODEL_CACHE).then((cache) =>
      cache.addAll(["/models/smolm2-1.7b-q4.onnx", "/models/tokenizer.json"])
    )
  );
});

Матрица Решений

Ваша потребность?
├─ Чат / Разговорный ИИ → ✅ WebLLM
├─ Мультимодальный ИИ → ✅ Transformers.js
├─ Корпоративный продакшен → ✅ ONNX Runtime Web
├─ Офлайн-приложение → ✅ WebLLM + Service Worker
└─ Быстрый прототип → ✅ Transformers.js

Тренды H2 2026

Тренд	Описание
Повсеместный WebGPU	Поддержка в Safari 18+, больше нет проблем совместимости
MoE в Браузере	Разреженные модели Mixtral работают в браузере
Файн-тюнинг на устройстве	Веса LoRA загружаются, персонализированные модели без сервера
W3C Web AI API	Стандартизированные встроенные ИИ-возможности браузера

Итоги

Браузерный ИИ превратился из «игрушки» в «инструмент» — модель 4B на 25 tok/s применима на практике
Три фреймворка, три сильные стороны — WebLLM быстрый, Transformers.js полный, ONNX стабильный
Конфиденциальность — главная фишка — Данные никогда не покидают браузер, нулевые серверные расходы
Стратегия деградации — ключ к успеху — WebGPU → маленькая модель → облачный API, гарантированная доступность

Если ваш ИИ-продукт в 2026 году по-прежнему отправляет каждый запрос в облако, вы не просто тратите серверные ресурсы — вы упускаете защиту конфиденциальности, главное конкурентное преимущество.