Initial commit

2025-12-25 12:01:35 +03:00
commit c574533f63
85 changed files with 6027 additions and 0 deletions
@@ -0,0 +1,343 @@
+# Техническое задание на разработку фронтенда 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. Соответствие требованиям производительности