Optimizers

This is an application for showing how optimization algorithms work.

Песочница для визуализации градиентных методов нахождения минимума функции — React/TypeScript/Vite. Все вычисления (оптимизаторы, планировщики lr, тестовая функция, поиск минимумов) выполняются прямо в браузере, без сети и без бэкенда.

Возможности

Главная

• 29 оптимизаторов: от классических SGD, Momentum, Nesterov и Newton до современных — Adam-семейство (AdamW, NAdam, RAdam, AdaBelief, Adan, ADOPT, AdEMAMix, CautiousAdamW, ScheduleFreeAdamW), Lion, Sophia, Prodigy, MARS, Shampoo, LBFGS, Левенберг—Марквардт и другие.
• 14 планировщиков скорости обучения: косинусный отжиг с тёплыми перезапусками, OneCycle, Noam, WSD, REX, циклическое, экспоненциальное и прочие; текущий lr виден в легенде анимации.
• 30 предустановленных тестовых функций (Химмельблау, Розенброк, Растригин, Экли, Швефель, Eggholder…).
• Все глобальные минимумы функции находятся численно и отмечаются звёздами на графике.
• Графики в 2D и 3D (контуры или поверхность), анимация спуска со скоростью от ×0.125 до ×64.
• Поле направлений: стрелки антиградиента поверх 2D-контура.
• Стохастический шум: настраиваемая дисперсия шума градиента (σ) — имитация мини-батч SGD.
• Пошаговый режим: покадровая навигация с отображением координат каждого оптимизатора.
• Экспорт GIF: анимация рендерится покадрово в фоновом Web Worker, с осями, легендой и цветовой шкалой — скачивается одним файлом.
• График сходимости: выбор метрики для обеих осей Y (значение функции, lr, норма градиента, внутренний стейт оптимизатора и др.), логарифмическая шкала для обеих осей.
• Настройка длины видимого хвоста траектории и скрытие/показ отдельных траекторий — удобно сравнивать оптимизаторы, идущие одним путём.
• Несколько оптимизаторов на одном графике, у каждого свои параметры, планировщик и цвет; кнопка дублирования оптимизатора со всеми настройками.
• Выбор цветовой палитры графика.
• Тема: светлая, системная или тёмная — на скриншотах ниже обе.
• Стартовая точка и настройки графика сохраняются в URL и localStorage.

Галерея

• Тестовые функции: сетка миниатюр с контурными превью — клик открывает функцию на главной.
• Планировщики: интерактивные карточки с редактируемыми параметрами, шагами и base lr — кривая lr пересчитывается мгновенно.

Анализ

• Анализ чувствительности: sweep гиперпараметра оптимизатора — графики сходимости и финального значения функции для каждого значения параметра.
• Тепловая карта сходимости: оптимизатор запускается из каждой точки области, результат визуализируется как бассейны сходимости; контурные линии оригинальной функции наложены для ориентации.
• Анимация тепловой карты: слайдер по шагам показывает формирование бассейнов сходимости от начала до конца оптимизации.
• Настройка разрешения сетки и параметров оптимизатора прямо в панели анализа.

Установка

npm install

Разработка

npm run dev

поднимает Vite dev-сервер на порту 47913.

Production

npm run build

собирает статику в dist/ — обычный статический сайт, отдавать его можно любым статик-сервером.

Вычисления оптимизаторов выполняются в Web Worker — UI не блокируется даже на тысячах шагов. Бандл оптимизирован: кастомная сборка Plotly, esnext-таргет, сабсет шрифтов.

Десктопное приложение (Tauri)

Приложение полностью клиентское, поэтому его же можно упаковать в нативное десктопное приложение через Tauri — без Node.js в итоговом бинарнике, только Rust-обвязка вокруг системного webview (WKWebView/WebView2/WebKitGTK).

Нужен установленный Rust (rustup или Homebrew cargo); на Linux дополнительно системные пакеты для сборки (libwebkit2gtk-4.1-dev, librsvg2-dev и стандартные build-тулы) — требование самого Tauri v2.

npm run tauri dev

поднимает Vite и открывает нативное окно (аналог npm run dev, но в отдельном окне вместо браузера).

npm run tauri build

собирает готовое приложение — .app/.dmg (macOS), .msi/.exe (Windows), .deb/.AppImage (Linux) — в src-tauri/target/release/bundle/.

Обновление скриншотов

Скрипт scripts/update-screenshots.ts делает скриншоты через Playwright. Нужен запущенный dev-сервер:

npm run dev

В другом терминале:

npx playwright install chromium   # при первом запуске
npx tsx scripts/update-screenshots.ts

Результат — обновлённые images/example1.png и images/example2.png.

Добавление нового оптимизатора или планировщика

TS-модуль в src/shared/lib/optimization-engine/optimizers/ (или schedulers/) с регистрацией в соседнем registry.ts. На странице «Галерея» карточка появится автоматически.

Примеры