Браузер превращается в AI-сервер
Еще полтора года назад идея запустить 20-миллиардную модель в браузере казалась безумием. Сегодня - это рабочий инструмент для веб-разработчиков. В 2026 году WebGPU окончательно перестал быть экспериментальной технологией, а Transformers.js превратился из игрушки в полноценную среду выполнения.
GPT-OSS 20B - та самая модель, которую Meta выпустила в 2024 году как открытую альтернативу GPT-4. Она не самая новая (уже есть Qwen3-235B и другие монстры), но идеально подходит для браузерного запуска. 20 миллиардов параметров - тот порог, где модель уже достаточно умная, но еще не требует 80 ГБ видеопамяти.
Проверьте поддержку WebGPU в вашем браузере: Chrome 124+, Edge 124+, Firefox 130+. Safari пока в отстающих - Apple внезапно затормозила с внедрением.
Что нужно знать перед стартом
Браузерный инференс - это не магия, а набор компромиссов. Основные ограничения:
- Объем видеопамяти браузера: обычно 4-8 ГБ, но можно расширить через флаги
- Скорость загрузки модели: GPT-OSS 20B в ONNX формате весит ~8 ГБ
- Тепловыделение: ваш ноутбук может взлететь при генерации длинных текстов
- Стабильность: WebGPU драйверы все еще сырые, особенно на интегрированной графике
Если вы уже пробовали запускать LLM в браузере с меньшими моделями, GPT-OSS покажется тяжеловесом. Но именно здесь начинается настоящее веселье.
Подготовка модели: конвертация в ONNX
Первое правило браузерного AI: все должно быть в ONNX. Transformers.js v4 (актуальная версия на февраль 2026) поддерживает ONNX Runtime Web как основной бэкенд для WebGPU.
1 Устанавливаем конвертер
pip install optimum[exporters] onnx onnxruntime-gpu
Optimum - библиотека от Hugging Face для оптимизации трансформеров. В 2026 году она научилась конвертировать модели с учетом специфики WebGPU (особенности тензорных ядер, память и т.д.).
2 Конвертируем GPT-OSS 20B
optimum-cli export onnx --model meta-llama/GPT-OSS-20B \
--task text-generation \
--framework pt \
--opset 18 \
--device cuda \
--optimize O4 \
gpt-oss-20b-onnx
Ключевые моменты:
--opset 18: последняя версия ONNX операторов на февраль 2026--optimize O4: автоматическая квантизация до INT4 с сохранением качества--device cuda: конвертация на GPU ускоряет процесс в 5-10 раз
Конвертация займет 20-40 минут даже на RTX 4090. Модель большая, слоев много. Не закрывайте терминал и не перезагружайте компьютер.
Настройка Transformers.js v4
Transformers.js v4 - это не та библиотека, которую вы помните по 2024 году. После выхода из браузера в Node.js она обросла новыми возможностями. Но для браузера нам нужна именно клиентская версия.
npm install @huggingface/transformers@latest
В package.json проверьте версию - должна быть 4.3.0 или выше. В феврале 2026 вышла 4.3.2 с критическими исправлениями для WebGPU на AMD видеокартах.
3 Базовая HTML структура
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GPT-OSS 20B в браузере</title>
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.18.0/dist/ort.webgpu.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.3.2"></script>
</head>
<body>
<textarea id="input" placeholder="Введите запрос..."></textarea>
<button id="generate">Сгенерировать</button>
<div id="output"></div>
<div id="status">Загрузка модели...</div>
</body>
</html>
ONNX Runtime Web 1.18.0 - последняя стабильная версия на февраль 2026. Они исправили баг с утечкой памяти при работе с большими моделями.
Инициализация модели и WebGPU контекста
Теперь самое интересное - заставить 20 миллиардов параметров работать в песочнице браузера.
// Проверяем поддержку WebGPU
if (!navigator.gpu) {
document.getElementById('status').textContent =
'WebGPU не поддерживается. Обновите браузер или включите флаг.';
throw new Error('WebGPU required');
}
// Конфигурация WebGPU
const gpuAdapter = await navigator.gpu.requestAdapter({
powerPreference: 'high-performance',
forceFallbackAdapter: false
});
if (!gpuAdapter) {
document.getElementById('status').textContent =
'Не удалось получить GPU адаптер. Попробуйте другую видеокарту.';
throw new Error('No GPU adapter');
}
const gpuDevice = await gpuAdapter.requestDevice();
Chrome может запросить разрешение на использование GPU. Если вы его не видите - проверьте настройки контента. Без этого разрешения WebGPU работать не будет.
4 Загрузка GPT-OSS 20B
// Инициализация Transformers.js с WebGPU бэкендом
import { pipeline, env } from '@huggingface/transformers';
// Используем ONNX Runtime Web с WebGPU
env.backends.onnx.wasm.numThreads = 1; // WebGPU не использует WASM треды
env.backends.onnx.wasm.proxy = false;
env.backends.onnx.wasm.simd = false;
// Настройка кэширования - важно для 8 ГБ модели
env.cacheDir = 'gpt-oss-cache';
env.allowLocalModels = true;
// Загружаем модель
const statusElement = document.getElementById('status');
statusElement.textContent = 'Загрузка модели (8 ГБ)...';
try {
const generator = await pipeline(
'text-generation',
'./gpt-oss-20b-onnx', // локальная папка с ONNX файлами
{
device: 'webgpu',
dtype: 'qint4', // используем квантизацию INT4
revision: 'onnx',
config: {
max_length: 512,
temperature: 0.7,
top_p: 0.9,
repetition_penalty: 1.1
}
}
);
statusElement.textContent = 'Модель загружена! Готов к работе.';
// Обработчик генерации
document.getElementById('generate').addEventListener('click', async () => {
const input = document.getElementById('input').value;
const output = document.getElementById('output');
output.textContent = 'Генерация...';
const result = await generator(input, {
max_new_tokens: 256,
do_sample: true,
top_k: 40
});
output.textContent = result[0].generated_text;
});
} catch (error) {
statusElement.textContent = `Ошибка: ${error.message}`;
console.error('Failed to load model:', error);
}
Ключевой параметр - dtype: 'qint4'. Без квантизации INT4 модель просто не влезет в видеопамять. Transformers.js v4 автоматически преобразует ONNX веса в формат, понятный WebGPU.
Оптимизации для реального использования
Сырая реализация будет тормозить. Вот что нужно сделать для приемлемой скорости:
| Оптимизация | Эффект | Сложность |
|---|---|---|
| Кэширование KV | Ускорение на 30-50% при диалоге | Средняя |
| Пакетная обработка | Лучшее использование GPU | Высокая |
| Оптимизированные шейдеры | Еще +20% скорости | Низкая |
| Прогрессивная загрузка | Меньше ожидания при старте | Средняя |
Кэширование ключей-значений (KV Cache)
Самая важная оптимизация для диалоговых моделей. Без нее каждый новый токен будет пересчитывать всю историю.
// Расширенная конфигурация с KV кэшем
const generator = await pipeline(
'text-generation',
'./gpt-oss-20b-onnx',
{
device: 'webgpu',
dtype: 'qint4',
revision: 'onnx',
config: {
use_cache: true, // Включаем KV кэш
cache_implementation: 'webgpu', // Специальная реализация для WebGPU
max_cache_length: 2048, // Максимальная длина кэша
chunk_length: 512, // Размер чанка для progressive decoding
}
}
);
// При генерации используем прошлый кэш
let pastKeyValues = null;
async function generateWithCache(input) {
const result = await generator(input, {
max_new_tokens: 256,
past_key_values: pastKeyValues, // Передаем прошлый кэш
return_dict_in_generate: true,
output_attentions: false,
output_hidden_states: false
});
// Сохраняем кэш для следующего вызова
pastKeyValues = result.past_key_values;
return result[0].generated_text;
}
KV кэш в WebGPU хранится в видеопамяти. Это быстрее, но требует аккуратного управления. Не забывайте сбрасывать кэш при смене темы диалога.
Проблемы и их решения
В процессе обязательно столкнетесь с этим:
- Out of memory: WebGPU выделяет фиксированный объем. Решение - увеличить лимит через
--disable-web-security --enable-features=Vulkanв Chrome - Медленная загрузка: 8 ГБ через интернет - это 5-10 минут даже на гигабите. Решение - Service Worker с прогрессивной загрузкой
- Перегрев: GPU в браузере не имеет нормального троттлинга. Решение - ограничивать длину генерации и делать паузы
- Нестабильность драйверов: Особенно на Intel Arc и AMD старых серий. Решение - fallback на CPU через WASM
Сравнение с альтернативами
Зачем вообще мучиться с браузером, если есть GPT-OSS 120B на локальном сервере или облачные API?
| Подход | Плюсы | Минусы | Скорость (токен/с) |
|---|---|---|---|
| Браузер + WebGPU | Нет сервера, полная приватность, работает офлайн | Ограничения памяти, зависимость от браузера | 8-12 (RTX 4070) |
| Локальный сервер (Ollama) | Полный контроль, больше памяти, стабильность | Требует установки, занимает ресурсы | 15-25 (RTX 4070) |
| Open WebUI + API | Удобный интерфейс, много моделей | Сложная настройка, требует сервер | Зависит от бэкенда |
| Облачные API (OpenAI) | Максимальная скорость, нет ограничений | Дорого, нет приватности, требует интернет | 50+ |
Браузерный подход выигрывает в одном - простоте распространения. Открыл сайт, подождал загрузку, работаешь. Никаких Docker, Python, CUDA драйверов.
Кому это нужно в 2026 году
Технология уже перестала быть игрушкой для энтузиастов. Реальные кейсы:
- Конфиденциальные приложения: медицинские диагнозы, юридические консультации, корпоративные данные. Все остается на устройстве клиента.
- Офлайн-режим: полевые работники, самолеты, корабли, зоны без интернета. Загрузил модель один раз - работаешь везде.
- Демо и прототипы: показываешь клиенту AI-фичу без развертывания сервера. Открыл ноутбук - вот работающий прототип.
- Образование: студенты изучают LLM без доступа к GPU-серверам. Любой ноутбук с видеокартой превращается в AI-лабораторию.
Особенно интересно выглядит P2P WebGPU-раннер - распределенная система, где браузеры делятся вычислительными ресурсами. Представьте торрент, но для AI-инференса.
Что будет дальше
К концу 2026 года браузерные модели станут обычным делом. Уже сейчас видно тенденции:
- Chrome готовит Prompt API - нативная интеграция LLM в браузер
- WebGPU получает расширения для спарсенных вычислений (идеально для MoE моделей)
- Появляются специализированные GPU для браузерного AI (Apple M4 уже заточен под это)
- Квантизация INT2 становится стабильной - модели будут в 2 раза меньше
GPT-OSS 20B сегодня - это верхняя граница возможного. Через год в браузере будут работать 70B модели с той же скоростью. А через два - возможно, и 200B.
Главный барьер сейчас не технологии, а ментальность. Разработчики все еще думают, что AI - это обязательно сервер и Python. Попробуйте запустить GPT-OSS в браузере. Просто чтобы понять, что будущее уже здесь, просто оно неравномерно распределено.
Не пытайтесь запустить это на корпоративном ноутбуке с заблокированными флагами Chrome. ИТ-отдел вас не поймет. Лучше тестируйте на личном компьютере с последней версией Chrome Canary.
