Запуск AI-моделей непосредственно в браузере с помощью Transformers.js

Что если ваше веб-приложение могло бы классифицировать текст, транскрибировать аудио или обнаруживать объекты на изображениях — без отправки данных на сервер? Именно это и делает возможным Transformers.js. Библиотека обеспечивает клиентский AI-инференс в браузере, используя только JavaScript.

Что такое Transformers.js?

Transformers.js — это JavaScript-библиотека от Hugging Face, которая позволяет запускать предобученные модели машинного обучения непосредственно в браузере — без необходимости в backend-сервере для моделей. Она повторяет API Python-библиотеки transformers от Hugging Face, поэтому ментальная модель легко переносится, если вы работали с ней ранее.

Поддерживаемый пакет — @huggingface/transformers. Если вы встретите старые упоминания @xenova/transformers, они относятся к прежнему названию пакета, использовавшемуся до того, как проект перешёл под поддержку Hugging Face. Текущий стабильный релиз — линейка v3, с доступными preview-версиями v4, которые пока не являются универсально стабильными.

Как на самом деле работает AI-инференс в браузере

Transformers.js выполняет модели с использованием ONNX Runtime, скомпилированного для JavaScript-окружений. ONNX (Open Neural Network Exchange) выступает в роли универсального формата, который позволяет моделям, обученным в PyTorch, TensorFlow или JAX, работать в браузере.

По умолчанию инференс выполняется на CPU через WebAssembly (WASM) — что работает практически во всех современных браузерах. Для лучшей производительности на поддерживаемом оборудовании вы можете включить WebGPU, который переносит вычисления на GPU.

Доступность WebGPU продолжает развиваться в различных браузерах и платформах. Текущий статус реализации можно проверить на webstatus.dev. На практике поддержка и производительность всё ещё варьируются в зависимости от браузера, операционной системы и драйверов GPU.

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

Не каждая модель Hugging Face работает в браузере

Это важное ограничение: моделям нужны ONNX-совместимые веса для работы с Transformers.js. Многие популярные архитектуры — DistilBERT, Whisper, T5, Llama, Qwen и десятки других — уже имеют ONNX-версии, доступные на Hugging Face Hub. Для моделей, у которых их нет, вы можете конвертировать их с помощью Optimum.

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

• "fp32" — полная точность, по умолчанию для WebGPU
• "fp16" — половинная точность, хороший баланс для GPU
• "q8" — 8-битная квантизация, по умолчанию для WASM
• "q4" — 4-битная квантизация, наименьший размер и самая высокая скорость

Запуск первого pipeline

API pipeline обрабатывает предобработку, инференс и постобработку в одном вызове. Установите пакет:

npm install @huggingface/transformers

Затем запустите анализ тональности в несколько строк:

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

// Defaults to WASM, uses a default model for the task
const classifier = await pipeline("sentiment-analysis");
const result = await classifier("I love building with Transformers.js!");
console.log(result); // [{ label: 'POSITIVE', score: 0.9998 }]

Чтобы включить WebGPU с точностью fp16:

const classifier = await pipeline(
  "sentiment-analysis",
  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
  { device: "webgpu", dtype: "fp16" }
);

Файлы моделей кэшируются в браузере после первой загрузки, поэтому повторное использование — включая офлайн-режим — не требует их повторной загрузки. Для production рассмотрите возможность самостоятельного хостинга ресурсов моделей вместо прямой зависимости от Hub.

Один практический момент: по умолчанию инференс выполняется в главном потоке, что может заморозить UI во время тяжёлых вычислений. Перемещение инференса в Web Worker — правильный паттерн для любой production-функции.

Почему это важно для frontend-разработчиков

Запуск AI-моделей в браузере с помощью Transformers.js открывает сценарии использования, которые серверный инференс не может обеспечить так же эффективно:

• Инференс с сохранением приватности — пользовательские данные никогда не покидают устройство
• Офлайн AI-приложения — могут работать без сетевого подключения после первоначальной загрузки модели
• Снижение затрат на сервер — меньше backend GPU-нагрузок для обеспечения или масштабирования
• Функции с низкой задержкой — нет сетевого round-trip к API-эндпоинту

Список поддерживаемых задач широк: классификация текста, суммаризация, перевод, обнаружение объектов, сегментация изображений, распознавание речи, синтез речи и многое другое.

Заключение

Transformers.js делает браузерный AI всё более практичным для frontend-разработчиков. Начните с небольшой квантованной модели, проверьте, что задача соответствует вашему сценарию использования, затем оптимизируйте — WebGPU для скорости, Web Workers для отзывчивости UI и самостоятельно размещённые модели для надёжности в production. Официальная документация и хаб моделей — лучшие следующие шаги.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.