Локальный ИИ в браузере: определяем настроение текста через Transformers.js

Transformers.js можно освоить на одном небольшом проекте, если сразу видеть вход, действие и результат. Transformers.js загружает модель и выполняет pipeline анализа тональности в браузере без собственного Python-сервера. Ниже вы соберёте работающий пример и проверите обычный и граничный сценарии.

Кнопка «анализировать» кажется простой, но первый запуск загружает веса, результат зависит от модели, а label нельзя показывать как абсолютную истину. Поэтому отделим настройку, входные данные, основное действие и проверку. В этой статье вы соберёте страницу с текстовым полем, индикатором загрузки и локальной классификацией positive/negative со score. Проверка: после первой загрузки две тестовые фразы получают разные метки, кнопка не запускает параллельные запросы, а пустой ввод отклоняется.

Как устроен учебный проект Transformers.js

UI собирает текст, singleton-функция один раз создаёт pipeline, модель токенизирует строку и возвращает список категорий со score. Держите ввод, логику и отображение раздельно: тогда каждый этап можно проверить отдельно.

Контрольные точки: интерфейс, модель, inference и проверка. Следующий шаг начинается после совпадения с ожидаемым результатом.

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Пример сверялся с актуальной документацией официальной документации Transformers.js на 19 октября 2026 года. Создайте Vite-проект и установите @huggingface/transformers. Запускайте через локальный сервер, чтобы модули и файлы модели загружались корректно. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

import { pipeline } from '@huggingface/transformers'

const input = document.querySelector('#text')
const button = document.querySelector('#analyze')
const output = document.querySelector('#result')
let classifierPromise

function getClassifier() {
  classifierPromise ??= pipeline('sentiment-analysis')
  return classifierPromise
}

button.addEventListener('click', async () => {
  const text = input.value.trim()
  if (!text) {
    output.textContent = 'Введите текст'
    return
  }

  button.disabled = true
  output.textContent = 'Модель загружается или считает…'
  try {
    const classifier = await getClassifier()
    const [result] = await classifier(text)
    output.textContent = result.label + ': ' + (result.score * 100).toFixed(1) + '%'
  } catch (error) {
    console.error(error)
    output.textContent = 'Не удалось загрузить модель'
  } finally {
    button.disabled = false
  }
})

Кешируется Promise создания pipeline, поэтому параллельные вызовы не создают несколько тяжёлых экземпляров модели. Найдите в примере вход, проверку и место формирования результата.

Что отличает устойчивый проект от случайного запуска. Явные границы делают ошибку локальной и понятной.

Что происходит внутри и почему это работает

Pipeline объединяет токенизатор, модель и постобработку для выбранной задачи. В браузере вычисления обычно идут через ONNX Runtime; доступный backend и производительность зависят от устройства. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. После первой загрузки файлы могут попасть в браузерный кеш, но это не гарантирует полный офлайн на любом хостинге. Если нужен офлайн, контролируйте размещение модели, кеш и политику приложения.

Score показывает уверенность модели внутри её набора категорий, а не истинность утверждения. Модель может быть обучена на английском и плохо понимать русский. Перед продуктовым использованием читайте model card, язык, датасет, лицензию и ограничения. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

Добавьте историю последних пяти анализов и кнопку очистки. Не храните текст автоматически, пока пользователь явно не выбрал сохранение. До правки запишите ожидаемое поведение одним предложением. После граничного теста повторите обычный сценарий.

В локальном AI-проекте важно показывать не только label, но и стоимость загрузки, язык модели и ограничение результата. Полезная правка проходит от нового ввода до видимого результата.

Четыре проверки перед следующим шагом. Каждый следующий этап начинается после наблюдаемого результата.

Что запомнить и куда двигаться дальше

Следующий шаг - выбрать модель под русский язык, изучить model card и вынести inference в Worker, если интерфейс заметно блокируется. Для закрепления откройте в локальном чат-боте WebLLM, в AI-расширении Chrome и в управлении жестами MediaPipe.

Как изучить тему в Кодике

Повторите Promise, async/await и модули, затем изучите токены, pipeline и model card. Сначала восстановите главную функцию и проверьте её на трёх значениях.

Сравните результат с простым словарным правилом и объясните, где модель даёт ценность, а где добавляет вес и неопределённость. Базовый синтаксис закрепите через курс по генеративному ИИ.

Что получится в итоге

Так выглядит законченный учебный проект: есть понятный вход, видимый результат, защита от неверных данных и место для следующего улучшения.