# Техническое задание на разработку фронтенда My Speaker ## 1. Общая информация и структура проекта webapp/ ├── index.html # Основная страница приложения (SPA) ├── style.css # Основные стили в ретро-стилистике ├── api.js # Модуль для работы с API (уже существует) ├── app.js # Точка входа: инициализация приложения и маршрутизация ├── modules/ # Папка для модулей приложения │ ├── router.js # Модуль маршрутизации (загрузка страниц) │ ├── login.js # Логика для страницы авторизации │ ├── dashboard.js # Логика для панели мониторинга │ ├── settings.js # Логика для страницы настроек │ ├── commands.js # Логика для страницы команд (зарезервировано на будущее) │ ├── header.js # Логика для верхней панели (имя пользователя, выход) │ ├── nav.js # Логика для навигационной панели │ └── utils.js # Общие утилиты (например, обработка ошибок, форматирование) ├── pages/ # Папка для HTML-страниц │ ├── dashboard.html # Разметка для панели мониторинга │ ├── settings.html # Разметка для настроек │ ├── commands.html # Разметка для команд │ └── login.html # Разметка для авторизации └── components/ # Папка для общих компонентов ├── header.html # Разметка верхней панели └── nav.html # Разметка навигационной панели ### 1.1. Цель проекта Разработка веб-интерфейса для системы распознавания речи My Speaker, позволяющего управлять настройками системы, отслеживать состояние распознавания речи и просматривать историю распознанных фраз. ### 1.2. Технологический стек - HTML5 - CSS3 - JavaScript (ES6+) - графики chart.js - Без использования фреймворков (чистый JavaScript) ## 2. Функциональные требования ### 2.1. Авторизация - Кнопка "шестеренка" для настройки основного цвета интерфейса (по умолчанию #0f0) и поле для ввода адреса бекенда (по умолчанию http://localhost:8000) - Форма входа с полями для ввода логина и пароля - Сохранение токена авторизации в localStorage - Автоматический выход при истечении срока действия токена - Кнопка выхода из системы, которая удаляет токен из localStorage ### 2.2. Панель мониторинга (Dashboard) не обновляется пока нет авторизации - Отображение текущего состояния системы распознавания речи - Визуализация уровня речи и энергии звука в реальном времени - Два ползунка громкости для микрофона и колонок (набудущее) - График изменения вероятности речи ("speech_prob" и "speech_threshold") и энергии звука ("energy" и "energy_threshold") - Данные обновляются с частотой из настроек системы (polling_interval_ms) - Отображение системной информации (загрузка CPU, память, температура) - Список последних распознанных фраз с выделением команд - Индикация состояния системы (прослушивание, запись, обработка) ### 2.3. Настройки системы - Формы должны быть свернуты и при развертывании новой, старая сворачивается. - Формы должны быть заполнены согласно описанию config.yaml.md (использоватся выпадающие списки для выбора определенных значений, кнопки больше и меньше должны иметь нужный шаг) - Кнопка сохранения для каждой формы, которая сохраняет введенные пользователем данные на сервер. - Форма для настройки параметров VAD (Voice Activity Detection) - Форма для настройки системных параметров - Форма для настройки параметров STT (Speech-to-Text) - Форма для настройки параметров команд - Форма для изменения учетных данных - Кнопка для перезапуска VAD и STT ## 3. Требования к интерфейсу ### 3.1. Общие требования - Адаптивный дизайн (поддержка мобильных устройств) - Максимальное использование пространства экрана без прокрутки как по вертикали, так и по горизонтали (в десктоп версии) - Темная цветовая схема в стиле ретро-игр (8-bit) - Использование шрифта "Press Start 2P" для создания пиксельной эстетики - Зеленая цветовая гамма на темном фоне (основной цвет текста #0f0) - Пиксельные элементы интерфейса (кнопки, индикаторы, рамки) - Интуитивно понятный интерфейс с игровой стилистикой ### 3.2. Структура интерфейса - Экран авторизации в стиле игрового меню - Основной экран с двумя основными панелями (информационная и контентная) - Верхняя панель с именем пользователя и кнопкой выхода - Навигационная панель для переключения между разделами (графики/настройки/команды) - Пиксельные рамки вокруг всех блоков и элементов интерфейса ### 3.3. Разделы интерфейса 1. **Авторизация** - Форма входа в стиле игрового меню с пиксельной рамкой - Поля для ввода логина (PLAYER NAME) и пароля (SECRET CODE) - Кнопка "START" в пиксельном стиле - Сообщение об ошибке в красном цвете - Подсказка с дефолтными учетными данными 2. **Панель мониторинга** - Информационная панель с основными параметрами (MAIN PARAMETERS) - Индикатор состояния системы с цветовой индикацией - Метрики с процентом речи и уровнем энергии с визуальными индикаторами - Системная статистика (CPU, MEM, TEMP) с графическими индикаторами - Игровая статистика (UPTIME, VAD, STT, AVG) - Окно лога с последними распознанными фразами - Графики активности речи и энергии звука 3. **Настройки** - Кнопка "REBOOT" для перезапуска системы - Раскрывающиеся группы настроек (details/summary) - Формы с полями ввода для каждого параметра в стиле ретро-игры - Выпадающие списки и числовые поля с пиксельными рамками ## 4. Взаимодействие с API ### 4.1. Авторизация - `POST /api/auth/login` - авторизация пользователя - `GET /api/auth/me` - получение информации о текущем пользователе - `POST /api/auth/logout` - выход из системы ### 4.2. Панель мониторинга - `GET /api/dashboard/speech-data` - получение данных о речи - `GET /api/dashboard/sys-monitor` - получение данных о нагрузке системы - `GET /api/dashboard/recent-phrases` - получение последних распознанных фраз - `GET /api/dashboard/stats` - получение статистики работы системы ### 4.3. Настройки - `GET /api/settings` - получение всех настроек - `PUT /api/settings/vad` - обновление настроек VAD - `PUT /api/settings/system` - обновление системных настроек - `PUT /api/settings/stt` - обновление настроек STT - `PUT /api/settings/commands` - обновление настроек команд - `PUT /api/settings/auth` - обновление настроек авторизации - `POST /api/settings/restart` - перезапуск VAD и STT ## 5. Описание ключевых параметров настройки ### 5.1. Параметры VAD (Voice Activity Detection) | Параметр | Описание | Тип элемента управления | | ----------------------- | ----------------------------------------------------- | ----------------------- | | mode | Режим работы VAD (агрессивность фильтрации) от 0 до 3 | Выпадающий список | | speech_threshold | Порог вероятности речи (0.0 - 1.0) | Ползунок | | energy_threshold | Порог энергии звука | Числовое поле | | min_speech_duration_ms | Минимальная длительность речи в мс | Числовое поле | | record_stop_delay_sec | Задержка остановки записи после окончания речи в сек | Числовое поле | | adaptive_energy | Использовать ли адаптивный порог энергии | Переключатель | | noise_reduction_enabled | Включить подавление шума | Переключатель | | auto_gain_enabled | Включить автоматическую регулировку усиления | Переключатель | ### 5.2. Системные параметры | Параметр | Описание | Тип элемента управления | | ------------------- | ------------------------------------------------------- | ----------------------- | | history_maxlen | Максимальное количество записей в истории распознавания | Числовое поле | | polling_interval_ms | Интервал опроса состояния системы в миллисекундах | Числовое поле | | logging_level | Уровень логирования | Выпадающий список | | log_save_file | Сохранять ли логи в файл | Переключатель | ## 6. Требования к реализации ### 6.1. Структура проекта ``` webapp/ ├── index.html # Единая страница приложения (SPA) ├── style.css # Основные стили в ретро-стилистике ├── api.js # Модуль для работы с API └── app.js # Основной модуль приложения с логикой ``` ### 6.2. Требования к коду - Модульная структура JavaScript-кода - Использование современных возможностей JavaScript (ES6+) - Комментирование кода - Обработка ошибок и исключений - Валидация вводимых данных на стороне клиента ### 6.3. Требования к производительности - Быстрая загрузка страниц (оптимизация размера файлов) - Эффективное обновление данных без перезагрузки страницы - Оптимизация для работы на устройствах с ограниченными ресурсами ## 7. Примеры реализации ключевых компонентов ### 7.1. Авторизация ```javascript // Пример функции авторизации async function login(username, password) { try { const response = await fetch("/api/auth/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ username, password }), }); if (!response.ok) { throw new Error("Ошибка авторизации"); } const data = await response.json(); localStorage.setItem("token", data.access_token); window.location.href = "index.html"; } catch (error) { showError(error.message); } } ``` ### 7.2. Получение данных о речи ```javascript // Пример функции получения данных о речи async function getSpeechData() { try { const token = localStorage.getItem("token"); if (!token) { window.location.href = "login.html"; return; } const response = await fetch("/api/dashboard/speech-data", { headers: { Authorization: `Bearer ${token}`, }, }); if (!response.ok) { if (response.status === 401) { localStorage.removeItem("token"); window.location.href = "login.html"; return; } throw new Error("Ошибка получения данных"); } const data = await response.json(); updateSpeechDataUI(data); } catch (error) { showError(error.message); } } // Обновление интерфейса с полученными данными function updateSpeechDataUI(data) { document.getElementById("speech-prob").textContent = (data.speech_prob * 100).toFixed(1) + "%"; document.getElementById("energy-level").textContent = data.energy; // Обновление индикаторов const speechIndicator = document.getElementById("speech-indicator"); speechIndicator.style.width = data.speech_prob * 100 + "%"; speechIndicator.classList.toggle("active", data.speech_detected); const energyIndicator = document.getElementById("energy-indicator"); const energyPercent = Math.min( 100, (data.energy / data.energy_threshold) * 100 ); energyIndicator.style.width = energyPercent + "%"; // Добавление данных в график addDataToChart(speechChart, data.speech_prob, data.energy); } ``` ### 7.3. Обновление настроек ```javascript // Пример функции обновления настроек VAD async function updateVADSettings(settings) { try { const token = localStorage.getItem("token"); if (!token) { window.location.href = "login.html"; return; } const response = await fetch("/api/settings/vad", { method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify(settings), }); if (!response.ok) { if (response.status === 401) { localStorage.removeItem("token"); window.location.href = "login.html"; return; } throw new Error("Ошибка обновления настроек"); } const data = await response.json(); showSuccess("Настройки успешно обновлены"); return data; } catch (error) { showError(error.message); return null; } } ``` ## 8. Сроки и этапы разработки ### 8.1. Этапы разработки 1. Разработка структуры и базовых компонентов (3 дня) 2. Реализация авторизации (2 дня) 3. Разработка панели мониторинга (5 дней) 4. Разработка страницы настроек (4 дня) 5. Тестирование и отладка (3 дня) 6. Оптимизация и финальные доработки (2 дня) ### 8.2. Общий срок разработки 19 рабочих дней ## 9. Критерии приемки 1. Корректная работа всех функциональных элементов 2. Соответствие дизайна требованиям 3. Корректное отображение на различных устройствах 4. Отсутствие критических ошибок 5. Соответствие требованиям производительности