Перейти к основному содержимому

ADR-008: Использование React и Plotly для системы мониторинга

Статус​

Предложено (Proposed)

Контекст​

Пользователям VLMHyperBench необходим современный, интерактивный интерфейс для мониторинга длительных бенчмарков в реальном времени. Интерфейс должен отображать прогресс, живые логи инференса и сложные статистические графики (распределение метрик, корреляции).

Решение​

Мы выбираем стек React для фронтенда и FastAPI в качестве Backend.

1. Архитектура фронтенда​

  • React (Vite): Для создания быстрого и модульного UI.
  • Tailwind CSS: Для современной верстки.
  • Lucide React: Для иконок статусов этапов.

2. Визуализация данных (Plotly)​

  • Использование библиотеки react-plotly.js.
  • Backend (FastAPI) готовит данные в формате Plotly JSON.
  • Фронтенд просто отрисовывает их, сохраняя всю интерактивность (зум, фильтрация).

3. Real-time обновление (WebSockets)​

  • Оркестратор отправляет события в шину данных.
  • FastAPI сервер транслирует эти события через WebSockets на фронтенд.
  • Это позволяет обновлять прогресс-бары и логи без перезагрузки страницы.

Последствия​

Плюсы​

  • Высокая производительность: React эффективно обновляет только изменившиеся части интерфейса.
  • Интерактивность: Plotly позволяет детально исследовать выбросы (outliers) на графиках метрик.
  • Разделение ответственности: Backend занимается данными, фронтенд — представлением.

Минусы​

  • Усложнение процесса сборки (необходимость Node.js для разработки фронтенда).
  • Потребление памяти браузером при отображении очень больших логов.

Альтернативы​

  • Streamlit: Прост в разработке, но ограничен в кастомизации UI и менее отзывчив для сложных real-time систем.
  • Gradio: Хорош для демо моделей, но не подходит для построения комплексных дашбордов управления пайплайнами.