Initial commit: полный проект my_speaker

2025-12-25 12:16:19 +03:00
commit 8279fbb35f
85 changed files with 6027 additions and 0 deletions
@@ -0,0 +1,318 @@
+# Документация API
+
+Эта документация описывает все доступные эндпоинты API для приложения, включая методы, параметры, ответы и примеры использования. API разделено на три группы маршрутов: /api/auth, /api/settings и /api/dashboard. Большинство эндпоинтов, кроме /api/auth/login, требуют авторизации через Bearer-токен, который можно получить через эндпоинт логина.
+
+## Общая информация
+
+- **Базовый URL**: http://192.168.200.111:8000
+- **Авторизация**: Большинство эндпоинтов требуют заголовок `Authorization: Bearer <token>` или query-параметр `token=<token>`. Токен получается через /api/auth/login.
+- **Формат ответов**: JSON.
+- **Коды ошибок**:
+  - 401 Unauthorized: Требуется авторизация или токен недействителен.
+  - 500 Internal Server Error: Ошибка на сервере.
+
+## Получение токена авторизации
+
+Для доступа к защищённым эндпоинтам необходимо получить Bearer-токен через эндпоинт /api/auth/login.
+
+- **Эндпоинт**: POST /api/auth/login
+- **Описание**: Аутентифицирует пользователя и возвращает сессионный токен.
+- **Тело запроса (JSON)**:
+  ```
+  {
+    "username": "string",
+    "password": "string"
+  }
+  ```
+- **Ответ**:
+
+  - Успех (200):
+    ```
+    {
+      "access_token": "string",
+      "token_type": "bearer"
+    }
+    ```
+  - Ошибка (401):
+    ```
+    {
+      "detail": "Неверные учетные данные"
+    }
+    ```
+
+- **Пример**:
+
+  ```
+  curl -X POST http://192.168.200.111:8000/api/auth/login \
+   -H "Content-Type: application/json" \
+   -d '{"username": "admin", "password": "admin"}'
+  ```
+
+  Результат (пример):
+
+  ```
+  {
+    "access_token": "123e4567-e89b-12d3-a456-426614174000",
+    "token_type": "bearer"
+  }
+  ```
+
+Сохраните `access_token` для использования в других запросах.
+
+## Эндпоинты /api/auth
+
+1. **Получение информации о текущем пользователе**
+
+   - **Эндпоинт**: GET /api/auth/me
+   - **Описание**: Возвращает информацию о текущем пользователе на основе предоставленного токена. Если токен отсутствует или недействителен, возвращает неаутентифицированный статус.
+   - **Параметры запроса**:
+     - authorization (опционально, строка): Заголовок Authorization: Bearer <token>.
+     - token_param (опционально, строка): Query-параметр token=<token>.
+   - **Ответ**:
+
+     - Успех (200):
+       ```
+       {
+         "username": "string",
+         "is_authenticated": true
+       }
+       ```
+     - Неаутентифицирован (200):
+       ```
+       {
+         "username": "",
+         "is_authenticated": false
+       }
+       ```
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X GET http://192.168.200.111:8000/api/auth/me \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+2. **Выход из системы**
+
+   - **Эндпоинт**: POST /api/auth/logout
+   - **Описание**: Завершает сессию пользователя, удаляя токен.
+   - **Параметры запроса**:
+     - authorization (опционально, строка): Заголовок Authorization: Bearer <token>.
+     - token_param (опционально, строка): Query-параметр token=<token>.
+   - **Ответ**:
+
+     - Успех (200):
+       ```
+       {
+         "status": "success",
+         "message": "Выход выполнен успешно"
+       }
+       ```
+     - Нет сессии (200):
+       ```
+       {
+         "status": "success",
+         "message": "Нет активной сессии"
+       }
+       ```
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X POST http://192.168.200.111:8000/api/auth/logout \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+## Эндпоинты /api/settings
+
+1. **Получение всех настроек**
+
+   - **Эндпоинт**: GET /api/settings
+   - **Описание**: Возвращает все настройки приложения (VAD, system, STT, commands, auth).
+   - **Ответ**:
+
+     - Успех (200): Объект с полями vad, system, stt, commands, auth (см. модели в коде).
+     - Ошибка (401): {"detail": "Не авторизован"}
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X GET http://192.168.200.111:8000/api/settings \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+2. **Обновление настроек VAD**
+
+   - **Эндпоинт**: PUT /api/settings/vad
+   - **Описание**: Обновляет настройки VAD.
+   - **Тело запроса (JSON)**: Объект VADSettings (см. модель в коде).
+   - **Ответ**:
+
+     - Успех (200): Обновлённый объект VADSettings.
+     - Ошибка (401): {"detail": "Не авторизован"}
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X PUT http://192.168.200.111:8000/api/settings/vad \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "Content-Type: application/json" \
+      -d '{"mode": 1, "sample_rate": 16000, ...}'
+     ```
+
+(Аналогично для /system, /stt, /commands, /auth — обновление соответствующих настроек.)
+
+3. **Перезапуск VAD и STT**
+
+   - **Эндпоинт**: POST /api/settings/restart
+   - **Описание**: Перезапускает VAD и STT с новыми настройками.
+   - **Ответ**:
+
+     - Успех (200):
+       ```
+       {
+         "status": "success",
+         "message": "VAD и STT перезапущены"
+       }
+       ```
+     - Ошибка (401): {"detail": "Не авторизован"}
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X POST http://192.168.200.111:8000/api/settings/restart \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+## Эндпоинты /api/dashboard
+
+1. **Получение данных о речи и энергии**
+
+   - **Эндпоинт**: GET /api/dashboard/speech-data
+   - **Описание**: Возвращает текущие данные о речи и энергии, включая расширенные метрики VAD и STT.
+   - **Ответ**:
+
+     - Успех (200):
+       ```
+       {
+         "state": "string",
+         "speech_prob": 0.0,
+         "energy": 0.0,
+         "energy_threshold": 0.0,
+         "speech_detected": false,
+         "continuous_frames": 0,
+         "gain": 1.0,
+         "noise_floor": 0.0,
+         "stt_model_path": "string",
+         "stt_commands_count": 0
+       }
+       ```
+     - Ошибка (401): {"detail": "Не авторизован"}
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X GET http://192.168.200.111:8000/api/dashboard/speech-data \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+2. **Получение последних распознанных фраз**
+
+   - **Эндпоинт**: GET /api/dashboard/recent-phrases
+   - **Описание**: Возвращает список последних распознанных фраз (до указанного лимита).
+   - **Параметры запроса**:
+     - limit (опционально, целое число, по умолчанию 10): Максимальное количество фраз.
+   - **Ответ**:
+
+     - Успех (200):
+       ```
+       [
+         {
+           "text": "Пример фразы",
+           "timestamp": "2025-10-13T11:13:00",
+           "is_command": true
+         },
+         ...
+       ]
+       ```
+     - Ошибка (401): {"detail": "Не авторизован"}
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X GET http://192.168.200.111:8000/api/dashboard/recent-phrases?limit=5 \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+3. **Получение статистики системы**
+
+   - **Эндпоинт**: GET /api/dashboard/stats
+   - **Описание**: Возвращает расширенную статистику работы системы (время работы, количество распознанных фраз, системная нагрузка и т.д.).
+   - **Ответ**:
+
+     - Успех (200):
+       ```
+       {
+         "uptime": "0:00:00",
+         "recognized_phrases_count": 0,
+         "commands_executed_count": 0,
+         "system_load": {
+           "cpu_percent": 0.0,
+           "memory_percent": 0.0,
+           "temperature": 0.0
+         },
+         "total_speech_frames": 0,
+         "avg_speech_prob": 0.0,
+         "vad_initialized": true,
+         "stt_initialized": true
+       }
+       ```
+     - Ошибка (401): {"detail": "Не авторизован"}
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X GET http://192.168.200.111:8000/api/dashboard/stats \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+4. **Получение данных о нагрузке системы**
+
+   - **Эндпоинт**: GET /api/dashboard/sys-monitor
+   - **Описание**: Возвращает данные о нагрузке системы (CPU, память, температура).
+   - **Ответ**:
+
+     - Успех (200):
+       ```
+       {
+         "cpu_percent": 0.0,
+         "memory_percent": 0.0,
+         "temperature": 0.0
+       }
+       ```
+     - Ошибка (401): {"detail": "Не авторизован"}
+     - Ошибка (500): {"detail": "Описание ошибки"}
+
+   - **Пример**:
+     ```
+     curl -X GET http://192.168.200.111:8000/api/dashboard/sys-monitor \
+      -H "Authorization: Bearer 123e4567-e89b-12d3-a456-426614174000" \
+      -H "accept: application/json"
+     ```
+
+## Замечания
+
+- **Авторизация**: Все эндпоинты, кроме /api/auth/login, требуют токен, полученный через /api/auth/login. Токен можно передать:
+  - В заголовке: `Authorization: Bearer <token>`
+  - В query-параметре: `?token=<token>`
+- **Безопасность**: Пароли в настройках хранятся в открытом виде. Рекомендуется использовать хэширование (например, bcrypt) для auth.password.
+- **Хранение сессий**: Токены хранятся в памяти (ACTIVE_SESSIONS). Для продакшена используйте Redis или другую базу данных.
+- **Ограничения**: Токены не имеют срока действия. Рекомендуется добавить expiration (например, хранить timestamp в ACTIVE_SESSIONS).
+- **Обновления**: Документация актуализирована на 13 октября 2025 года. Добавлены новые поля в /speech-data, новый эндпоинт /sys-monitor и расширенная структура для /stats.
@@ -0,0 +1,377 @@
+# Документация API My Speaker
+
+## Общая информация
+
+API My Speaker предоставляет интерфейс для взаимодействия с системой распознавания речи, управления настройками и получения данных о работе системы. API построено на FastAPI и использует REST-подход.
+
+Базовый URL: `/api`
+
+## Аутентификация
+
+Все запросы к API (кроме авторизации) требуют аутентификации. Аутентификация осуществляется с помощью токена доступа, который можно получить через эндпоинт `/api/auth/login`.
+
+Токен можно передавать одним из следующих способов:
+
+1. В заголовке `Authorization: Bearer <token>`
+2. В параметре запроса `?token=<token>`
+
+### Эндпоинты аутентификации
+
+#### Авторизация
+
+```
+POST /api/auth/login
+```
+
+**Запрос:**
+
+```json
+{
+  "username": "admin",
+  "password": "your_password"
+}
+```
+
+**Ответ:**
+
+```json
+{
+  "access_token": "unique_session_token",
+  "token_type": "bearer"
+}
+```
+
+#### Получение информации о текущем пользователе
+
+```
+GET /api/auth/me
+```
+
+**Ответ:**
+
+```json
+{
+  "username": "admin",
+  "is_authenticated": true
+}
+```
+
+#### Выход из системы
+
+```
+POST /api/auth/logout
+```
+
+**Ответ:**
+
+```json
+{
+  "status": "success",
+  "message": "Выход выполнен успешно"
+}
+```
+
+## Панель управления (Dashboard)
+
+Все запросы к эндпоинтам панели управления выполняются с использованием токена полученного при авторизации.
+
+### Получение данных о речи
+
+````
+GET /api/dashboard/speech-data
+curl -X 'GET' \
+  'http://192.168.200.111:8000/api/dashboard/sys-monitor' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer dc1460d1-6e67-4730-afb2-c94de7d243b4'
+
+**Ответ:**
+```json
+{
+  "state": "listening",
+  "speech_prob": 0.85,
+  "speech_threshold": 0.5,
+  "energy": 1200,
+  "energy_threshold": 1000,
+  "speech_detected": true,
+  "continuous_frames": 5,
+  "gain": 1.2,
+  "noise_floor": 300
+}
+````
+
+### Получение данных о нагрузке системы
+
+```
+GET /api/dashboard/sys-monitor
+```
+
+**Ответ:**
+
+```json
+{
+  "cpu_percent": 25.5,
+  "memory_percent": 40.2,
+  "temperature": 45.3
+}
+```
+
+### Получение последних распознанных фраз
+
+```
+GET /api/dashboard/recent-phrases?limit=10
+```
+
+**Ответ:**
+
+```json
+[
+  {
+    "text": "включи свет",
+    "timestamp": "2023-06-15T14:30:45",
+    "is_command": true
+  },
+  {
+    "text": "какая погода сегодня",
+    "timestamp": "2023-06-15T14:29:30",
+    "is_command": false
+  }
+]
+```
+
+### Получение статистики работы системы
+
+```
+GET /api/dashboard/stats
+```
+
+**Ответ:**
+
+```json
+{
+  "uptime": "2:30:15",
+  "recognized_commands": 15,
+  "total_phrases": 45
+}
+```
+
+## Настройки (Settings)
+
+Все запросы к эндпоинтам настроек выполняются с использованием токена полученного при авторизации.
+
+### Получение всех настроек
+
+```
+GET /api/settings
+```
+
+**Ответ:**
+
+```json
+{
+  "vad": {
+    "mode": 3,
+    "sample_rate": 16000,
+    "frame_duration_ms": 30,
+    "ring_buffer_size": 20,
+    "speech_threshold": 0.5,
+    "energy_threshold": 1000,
+    "min_speech_duration_ms": 300,
+    "record_stop_delay_sec": 1.0,
+    "prebuffer_duration_sec": 1.0,
+    "max_record_duration_sec": 5.0,
+    "target_rms": 2000.0,
+    "max_gain": 5.0,
+    "noise_reduction_factor": 1.5,
+    "noise_update_alpha": 0.05,
+    "min_rms_threshold_factor": 2.0,
+    "gain_smoothing_alpha": 0.1,
+    "adaptive_energy_std_factor": 2.5,
+    "adaptive_energy": true,
+    "noise_reduction_enabled": true,
+    "auto_gain_enabled": true,
+    "record_on_speech": true
+  },
+  "system": {
+    "history_maxlen": 100,
+    "polling_interval_ms": 500,
+    "logging_level": "INFO",
+    "log_file": "logs/app.log",
+    "log_save_file": true
+  },
+  "stt": {
+    "model_path": "/path/to/vosk/model"
+  },
+  "commands": {
+    "commands_file": "commands/commands.yaml"
+  },
+  "auth": {
+    "username": "admin",
+    "password": "admin"
+  }
+}
+```
+
+### Обновление настроек VAD
+
+```
+PUT /api/settings/vad
+```
+
+**Запрос:**
+
+```json
+{
+  "mode": 3,
+  "speech_threshold": 0.7,
+  "energy_threshold": 1200
+}
+```
+
+**Ответ:**
+
+```json
+{
+  "mode": 3,
+  "sample_rate": 16000,
+  "frame_duration_ms": 30,
+  "ring_buffer_size": 20,
+  "speech_threshold": 0.7,
+  "energy_threshold": 1200,
+  "min_speech_duration_ms": 300,
+  "record_stop_delay_sec": 1.0,
+  "prebuffer_duration_sec": 1.0,
+  "max_record_duration_sec": 5.0,
+  "target_rms": 2000.0,
+  "max_gain": 5.0,
+  "noise_reduction_factor": 1.5,
+  "noise_update_alpha": 0.05,
+  "min_rms_threshold_factor": 2.0,
+  "gain_smoothing_alpha": 0.1,
+  "adaptive_energy_std_factor": 2.5,
+  "adaptive_energy": true,
+  "noise_reduction_enabled": true,
+  "auto_gain_enabled": true,
+  "record_on_speech": true
+}
+```
+
+### Обновление системных настроек
+
+```
+PUT /api/settings/system
+```
+
+**Запрос:**
+
+```json
+{
+  "history_maxlen": 200,
+  "polling_interval_ms": 1000
+}
+```
+
+**Ответ:**
+
+```json
+{
+  "history_maxlen": 200,
+  "polling_interval_ms": 1000,
+  "logging_level": "INFO",
+  "log_file": "logs/app.log",
+  "log_save_file": true
+}
+```
+
+### Обновление настроек STT
+
+```
+PUT /api/settings/stt
+```
+
+**Запрос:**
+
+```json
+{
+  "model_path": "/new/path/to/vosk/model"
+}
+```
+
+**Ответ:**
+
+```json
+{
+  "model_path": "/new/path/to/vosk/model"
+}
+```
+
+### Обновление настроек команд
+
+```
+PUT /api/settings/commands
+```
+
+**Запрос:**
+
+```json
+{
+  "commands_file": "commands/new_commands.yaml"
+}
+```
+
+**Ответ:**
+
+```json
+{
+  "commands_file": "commands/new_commands.yaml"
+}
+```
+
+### Обновление настроек авторизации
+
+```
+PUT /api/settings/auth
+```
+
+**Запрос:**
+
+```json
+{
+  "username": "new_admin",
+  "password": "new_password"
+}
+```
+
+**Ответ:**
+
+```json
+{
+  "username": "new_admin",
+  "password": "new_password"
+}
+```
+
+### Перезапуск VAD и STT
+
+```
+POST /api/settings/restart
+```
+
+**Ответ:**
+
+```json
+{
+  "status": "success",
+  "message": "VAD и STT перезапущены"
+}
+```
+
+## Коды ошибок
+
+- `401 Unauthorized` - Ошибка авторизации
+- `500 Internal Server Error` - Внутренняя ошибка сервера
+
+## Примечания
+
+- Все запросы и ответы используют формат JSON
+- Для всех запросов, требующих авторизации, необходимо передавать токен доступа
+- Параметры в запросах на обновление настроек являются опциональными, можно передавать только те параметры, которые нужно изменить
@@ -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. Соответствие требованиям производительности
@@ -0,0 +1,284 @@
+# Макеты страниц веб-приложения My Speaker
+
+Ниже представлены псевдографические макеты страниц приложения My Speaker в стиле ретро-игры (8-bit, шрифт "Press Start 2P", зеленая гамма `#0f0` на темном фоне). Макеты созданы для альбомной ориентации десктопных экранов и адаптивной верстки для мобильных устройств. Структура главного экрана включает:
+
+1. **Шапка**: Верхняя панель (`header.html`) с именем пользователя и кнопкой выхода, навигационная панель (`nav.html`) с переключением разделов.
+2. **Основной экран**:
+   - **Левая часть (Main Parameters)**: 40% ширины, постоянно отображает статус системы, индикаторы речи/энергии и системную статистику (`main-params.html`).
+   - **Правая часть (Контент)**: 60% ширины, динамически подгружает `graphics.html`, `settings.html`, `commands.html`.
+3. **Футер**: Логи с последними распознанными фразами (`footer.html`).
+
+Страница авторизации (`login.html`) отображается отдельно, без шапки, навигации и футера.
+
+## 1. Страница авторизации (`login.html`)
+
+**Описание**: Экран входа в стиле игрового меню с пиксельной рамкой. Содержит форму для логина (`PLAYER NAME`) и пароля (`SECRET CODE`), кнопку `[ START ]`, сообщение об ошибке (в красном цвете) и настройки интерфейса (цвет, URL бэкенда), открываемые по кнопке `[⚙️ Settings]`.
+
+### Десктопная версия
+
+```
+--------------------------------------------------+
+|                                                  |
+|                == MY SPEAKER LOGIN ==            |
+|                                                  |
+|         +-----------------------------+          |
+|         | PLAYER NAME:  [==========]  |          |
+|         | SECRET CODE:  [==========]  |          |
+|         |        [ START ]            |          |
+|         +-----------------------------+          |
+|         [ ERROR: Invalid login ]                 |
+|         Default: admin / admin                   |
+|                                                  |
+|         [⚙️ Settings]                           |
+|         +-----------------------------+          |
+|         | Main Color: [####]          |          |
+|         | Backend URL: [==========]   |          |
+|         +-----------------------------+          |
+|                                                  |
+--------------------------------------------------+
+```
+
+### Мобильная версия
+
+```
+---------------------+
+|                     |
+| == MY SPEAKER LOGIN ==
+|                     |
+| +-----------------+ |
+| | PLAYER NAME:    | |
+| | [============]   | |
+| | SECRET CODE:    | |
+| | [============]   | |
+| |    [ START ]    | |
+| +-----------------+ |
+| [ ERROR: Invalid  ] |
+| Default: admin/admin|
+|                     |
+| [⚙️ Settings]      |
+| +-----------------+ |
+| | Main Color: [##]| |
+| | Backend: [====] | |
+| +-----------------+ |
+|                     |
+---------------------+
+```
+
+**Пояснения**:
+
+- **Десктоп**: Форма центрирована, занимает ~30-40% ширины для альбомной ориентации. Пиксельная рамка (`+---+`) и ретро-стиль.
+- **Мобильный**: Форма растягивается на всю ширину, поля ввода и кнопка увеличены.
+- **Адаптивность**: Элементы масштабируются, текст остается читаемым.
+
+## 2. Главный экран с `graphics.html`
+
+**Описание**: Главный экран с `graphics.html` в правой части (60%). Левая часть (40%) показывает статус системы, индикаторы речи/энергии и статистику (`main-params.html`). Футер отображает последние фразы (`footer.html`).
+
+### Десктопная версия
+
+```
+--------------------------------------------------+
+| User: admin                       [ Logout ]      |
+--------------------------------------------------+
+| [ Dashboard | Settings | Commands ]               |
+--------------------------------------------------+
+| +--------------------+ +--------------------------+
+| | MAIN PARAMETERS    | | SPEACH                   |
+| |                    | |                          |
+| | Status: Listening  | |   ^
+| | [============] 85% | |                    *    |
+| |                    | |   |               *      |
+| | Speech Prob: [===] | |   |             *        |
+| | Energy:     [==]   | |   +-------------------+
+| |                    | |   Time                   |
+| | CPU: 25%           | |                          |
+| | MEM: 40%           | |                          |
+| | TEMP: 45°C         | |                          |
+| +--------------------+ +--------------------------+
+--------------------------------------------------+
+| == RECENT PHRASES ==                             |
+| +---------------------------------------------+  |
+| | "Turn on light"        "What's the weather" |  |
+| +---------------------------------------------+  |
+--------------------------------------------------+
+```
+
+### Мобильная версия
+
+```
+---------------------+
+| User: admin [Logout]|
+---------------------+
+| [Dash|Sett|Commands]|
+---------------------+
+| == MAIN PARAMETERS ==
+| Status: Listening   |
+| [===========] 85%   |
+| Speech Prob: [====] |
+| Energy: [==] 1200   |
+| CPU: 25%            |
+| MEM: 40%            |
+| TEMP: 45°C          |
+| == GRAPHICS ==      |
+|  ^             *    |
+|  |            *     |
+|  |           *      |
+|  |          *       |
+|  +-----------------+
+|  Time              |
+| == RECENT PHRASES ==
+| "Turn on light"    |
+| "What's the weather|
+---------------------+
+```
+
+**Пояснения**:
+
+- **Десктоп**: Шапка и навигация во всю ширину. Левая часть (40%) с индикаторами и статистикой, правая (60%) с линейным графиком (`speech_prob`, `energy`). Футер с фразами.
+- **Мобильный**: Карточки располагаются вертикально, график уменьшен.
+- **Адаптивность**: Альбомная ориентация на десктопе использует ширину экрана, на мобильных — вертикальная компоновка.
+
+## 3. Главный экран с `settings.html`
+
+**Описание**: Правая часть (60%) подгружает `settings.html` с раскрывающимися формами для настройки VAD, системных параметров и т.д. Левая часть и футер неизменны.
+
+### Десктопная версия
+
+```
+--------------------------------------------------+
+| User: admin                       [ Logout ]      |
+--------------------------------------------------+
+| [ Dashboard | Settings | Commands ]               |
+--------------------------------------------------+
+| +--------------------+ +--------------------------+
+| | MAIN PARAMETERS    | | SETTINGS                 |
+| |                    | |                          |
+| | Status: Listening  | | + VAD Settings        v  |
+| | [============] 85% | | +---------------------+  |
+| |                    | | | Mode: [0-3]         |  |
+| | Speech Prob: [===] | | | Speech Thr: [====]  |  |
+| | Energy:     [==]   | | | Energy Thr: [####]  |  |
+| |                    | | | [ SAVE ]            |  |
+| | CPU: 25%           | | +---------------------+  |
+| | MEM: 40%           | | - System Settings      |
+| | TEMP: 45°C         | | [ REBOOT ]             |
+| +--------------------+ +--------------------------+
+--------------------------------------------------+
+| == RECENT PHRASES ==                             |
+| +---------------------------------------------+  |
+| | "Turn on light"        "What's the weather" |  |
+| +---------------------------------------------+  |
+--------------------------------------------------+
+```
+
+### Мобильная версия
+
+```
+---------------------+
+| User: admin [Logout]|
+---------------------+
+| [Dash|Sett|Commands]|
+---------------------+
+| == MAIN PARAMETERS ==
+| Status: Listening   |
+| [===========] 85%   |
+| Speech Prob: [====] |
+| Energy: [==] 1200   |
+| CPU: 25%            |
+| MEM: 40%            |
+| TEMP: 45°C          |
+| == SETTINGS ==      |
+| + VAD Settings    v |
+| +-----------------+ |
+| | Mode: [0-3]     | |
+| | Speech Thr: [==]| |
+| | Energy Thr: [##]| |
+| | [ SAVE ]        | |
+| +-----------------+ |
+| - System Settings   |
+| [ REBOOT ]         |
+| == RECENT PHRASES ==
+| "Turn on light"    |
+| "What's the weather|
+---------------------+
+```
+
+**Пояснения**:
+
+- **Десктоп**: Правая часть показывает формы (`<details>`), например, VAD с выпадающим списком и ползунком. Кнопка `[ REBOOT ]` внизу.
+- **Мобильный**: Формы растягиваются на всю ширину, поля ввода увеличены.
+- **Адаптивность**: Элементы управления масштабируются, формы сворачиваются/разворачиваются.
+
+## 4. Главный экран с `commands.html`
+
+**Описание**: Правая часть (60%) подгружает `commands.html` с минимальной реализацией (путь к файлу команд и список). Левая часть и футер неизменны.
+
+### Десктопная версия
+
+```
+--------------------------------------------------+
+| User: admin                       [ Logout ]      |
+--------------------------------------------------+
+| [ Dashboard | Settings | Commands ]               |
+--------------------------------------------------+
+| +--------------------+ +--------------------------+
+| | MAIN PARAMETERS    | | COMMANDS                 |
+| |                    | |                          |
+| | Status: Listening  | | Commands File: [file]    |
+| | [============] 85% | | [ EDIT ]  [ SAVE ]      |
+| |                    | |                          |
+| | Speech Prob: [===] | | "Turn on light"         |
+| | Energy:     [==]   | | "Play music"           |
+| |                    | |                          |
+| | CPU: 25%           | |                          |
+| | MEM: 40%           | |                          |
+| | TEMP: 45°C         | |                          |
+| +--------------------+ +--------------------------+
+--------------------------------------------------+
+| == RECENT PHRASES ==                             |
+| +---------------------------------------------+  |
+| | "Turn on light"        "What's the weather" |  |
+| +---------------------------------------------+  |
+--------------------------------------------------+
+```
+
+### Мобильная версия
+
+```
+---------------------+
+| User: admin [Logout]|
+---------------------+
+| [Dash|Sett|Commands]|
+---------------------+
+| == MAIN PARAMETERS ==
+| Status: Listening   |
+| [===========] 85%   |
+| Speech Prob: [====] |
+| Energy: [==] 1200   |
+| CPU: 25%            |
+| MEM: 40%            |
+| TEMP: 45°C          |
+| == COMMANDS ==      |
+| Commands File: [f]  |
+| [ EDIT ] [ SAVE ]   |
+| "Turn on light"     |
+| "Play music"        |
+| == RECENT PHRASES ==
+| "Turn on light"    |
+| "What's the weather|
+---------------------+
+```
+
+**Пояснения**:
+
+- **Десктоп**: Правая часть показывает поле для `commands_file` и список команд. Кнопки `[ EDIT ]` и `[ SAVE ]` для редактирования.
+- **Мобильный**: Элементы растягиваются на всю ширину, список команд вертикальный.
+- **Адаптивность**: Компактное расположение, текст читаемый.
+
+## Пояснения к макетам
+
+- **Ретро-стиль**: Используются символы `+`, `=`, `*` для пиксельных рамок и индикаторов, отражая 8-bit эстетику и зеленую гамму (`#0f0`).
+- **Альбомная ориентация**: Десктопные макеты оптимизированы для широкого экрана, с разделением на 40% (Main Parameters) и 60% (контент).
+- **Адаптивность**: Мобильные макеты используют вертикальное расположение, избегая горизонтальной прокрутки, как указано в `FRONTEND_REQUIREMENTS.md`.
+- **Структура**: Шапка, основной экран (две карточки) и футер соответствуют запросу. Страница авторизации отдельная.
+- **Функциональность**: Макеты включают все элементы из требований (индикаторы, графики, формы, логи).
@@ -0,0 +1,86 @@
+# Документация по конфигурационному файлу config.yaml
+
+## Секция system
+Основные настройки системы
+
+| Параметр | Описание | Возможные значения |
+|----------|----------|-------------------|
+| history_maxlen | Максимальное количество записей в истории распознавания | Целое число > 0 (рекомендуется: 50-1000) |
+| polling_interval_ms | Интервал опроса состояния системы в миллисекундах | Целое число > 100 (рекомендуется: 1000-5000) |
+| logging_level | Уровень логирования | INFO, DEBUG, WARNING, ERROR, CRITICAL |
+| log_file | Путь к файлу логов | Строка, путь к файлу |
+| log_save_file | Сохранять ли логи в файл | true/false |
+
+## Секция vad
+Настройки системы определения голосовой активности (Voice Activity Detection)
+
+| Параметр | Описание | Возможные значения |
+|----------|----------|-------------------|
+| mode | Режим работы VAD (агрессивность фильтрации) | 0 (наименее агрессивный) - 3 (самый агрессивный) |
+| sample_rate | Частота дискретизации аудио в герцах | 8000, 16000, 32000, 48000 |
+| frame_duration_ms | Длительность фрейма в миллисекундах | 10, 20, 30 |
+| ring_buffer_size | Размер кольцевого буфера для фреймов | Целое число > 0 (рекомендуется: 10-30) |
+| speech_threshold | Порог вероятности речи | 0.0 - 1.0 (рекомендуется: 0.5-0.9) |
+| energy_threshold | Порог энергии звука | Целое число > 0 (рекомендуется: 300-1000) |
+| min_speech_duration_ms | Минимальная длительность речи в мс | Целое число > 0 (рекомендуется: 100-500) |
+| record_stop_delay_sec | Задержка остановки записи после окончания речи в сек | Число > 0.0 (рекомендуется: 0.5-2.0) |
+| prebuffer_duration_sec | Длительность предварительного буфера в сек | Число > 0.0 (рекомендуется: 0.5-2.0) |
+| max_record_duration_sec | Максимальная длительность записи в сек | Число > 0.0 (рекомендуется: 5.0-30.0) |
+| target_rms | Целевое среднеквадратичное значение громкости | Число > 0.0 (рекомендуется: 1000-3000) |
+| max_gain | Максимальное усиление звука | Число > 0.0 (рекомендуется: 1.0-10.0) |
+| noise_reduction_factor | Коэффициент подавления шума | Число > 1.0 (рекомендуется: 1.2-2.0) |
+| noise_update_alpha | Коэффициент обновления оценки шума | 0.0 - 1.0 (рекомендуется: 0.01-0.1) |
+| min_rms_threshold_factor | Минимальный коэффициент порога RMS | Число > 1.0 (рекомендуется: 1.5-3.0) |
+| gain_smoothing_alpha | Коэффициент сглаживания усиления | 0.0 - 1.0 (рекомендуется: 0.05-0.2) |
+| adaptive_energy_std_factor | Коэффициент стандартного отклонения для адаптивной энергии | Число > 0.0 (рекомендуется: 1.0-2.0) |
+| adaptive_energy | Использовать ли адаптивный порог энергии | true/false |
+| noise_reduction_enabled | Включить подавление шума | true/false |
+| auto_gain_enabled | Включить автоматическую регулировку усиления | true/false |
+| record_on_speech | Записывать ли аудио при обнаружении речи | true/false |
+
+## Секция stt
+Настройки системы распознавания речи (Speech-to-Text)
+
+| Параметр | Описание | Возможные значения |
+|----------|----------|-------------------|
+| model_path | Путь к модели Vosk | Строка, абсолютный путь к директории с моделью |
+
+## Секция commands
+Настройки системы команд
+
+| Параметр | Описание | Возможные значения |
+|----------|----------|-------------------|
+| commands_file | Путь к файлу с определениями команд | Строка, путь к YAML-файлу |
+
+## Секция auth
+Настройки аутентификации
+
+| Параметр | Описание | Возможные значения |
+|----------|----------|-------------------|
+| username | Имя пользователя для входа | Строка |
+| password | Пароль для входа | Строка |
+
+## Пример использования
+
+```yaml
+system:
+  history_maxlen: 50
+  polling_interval_ms: 1000
+  logging_level: INFO
+  log_file: logs/app.log
+  log_save_file: false
+
+vad:
+  mode: 3
+  sample_rate: 16000
+  frame_duration_ms: 30
+  speech_threshold: 0.7
+  energy_threshold: 400
+
+stt:
+  model_path: /path/to/vosk/model
+
+auth:
+  username: admin
+  password: your_secure_password
+```
@@ -0,0 +1,64 @@
+# Файловая структура проекта My Speaker
+
+Ниже представлена скорректированная файловая структура проекта веб-приложения My Speaker. Корректировки включают:
+- Добавление `main-params.html` в папку `components/` для постоянной левой части (Main Parameters) на главном экране.
+- Добавление `footer.html` в папку `components/` для футера с логами.
+- Добавление `graphics.html` в папку `pages/` для правой части с графиками (как указано в макетах).
+- Обновление модулей JavaScript для соответствия новым компонентам (например, добавление `graphics.js` для логики графиков).
+- Уточнение папок для лучшей организации: `pages/` для динамически подгружаемых правых частей, `components/` для общих элементов (шапка, навигация, Main Parameters, футер).
+- Обеспечение модульности в соответствии с `FRONTEND_REQUIREMENTS.md`: использование чистого JavaScript (ES6+), без фреймворков.
+- Учёт ретро-стиля и адаптивности в `style.css`.
+
+Структура проекта оптимизирована для SPA (Single Page Application), где `index.html` служит точкой входа, а контент подгружается динамически через `router.js`.
+
+## Полная структура
+
+```
+webapp/
+├── index.html          # Основная страница приложения (SPA): содержит контейнеры для шапки, основного экрана и футера
+├── style.css           # Основные стили в ретро-стилистике (пиксельные рамки, шрифт "Press Start 2P", адаптивность)
+├── api.js              # Модуль для работы с API (авторизация, получение данных, обновление настроек)
+├── app.js              # Точка входа: инициализация приложения, подключение модулей и запуск маршрутизации
+├── modules/            # Папка для JavaScript-модулей (логика страниц и компонентов)
+│   ├── router.js       # Маршрутизация: динамическая загрузка HTML в правую часть основного экрана
+│   ├── login.js        # Логика страницы авторизации (обработка формы, настройки интерфейса)
+│   ├── dashboard.js    # Логика главного экрана: инициализация Main Parameters, футера и общей структуры
+│   ├── graphics.js     # Логика для `graphics.html` (инициализация и обновление графиков с использованием Chart.js или Canvas)
+│   ├── settings.js     # Логика для `settings.html` (формы настроек, валидация, отправка на API)
+│   ├── commands.js     # Логика для `commands.html` (список команд, редактирование файла команд)
+│   ├── header.js       # Логика для `header.html` (имя пользователя, кнопка выхода, запрос на /api/auth/me)
+│   ├── nav.js          # Логика для `nav.html` (переключение разделов, подсветка активного)
+│   └── utils.js        # Общие утилиты (обработка ошибок, валидация форм, форматирование данных, DOM-манипуляции)
+├── pages/              # Папка для динамически подгружаемых HTML-страниц (правая часть основного экрана)
+│   ├── login.html      # Разметка страницы авторизации (форма входа, настройки интерфейса)
+│   ├── graphics.html   # Разметка для графиков (canvas для speech_prob и energy)
+│   ├── settings.html   # Разметка для настроек (раскрывающиеся формы с <details>, поля ввода, кнопки сохранения)
+│   └── commands.html   # Разметка для команд (поле для commands_file, список команд, кнопки редактирования)
+└── components/         # Папка для общих HTML-компонентов (шапка, навигация, левая часть, футер)
+    ├── header.html     # Разметка верхней панели (имя пользователя, кнопка выхода)
+    ├── nav.html        # Разметка навигационной панели (кнопки Dashboard, Settings, Commands)
+    ├── main-params.html# Разметка левой части (Main Parameters: статус, индикаторы, статистика CPU/MEM/TEMP)
+    └── footer.html     # Разметка футера (список последних фраз из recent-phrases)
+
+```
+
+## Объяснение корректировок
+- **Добавления**: 
+  - `graphics.html` и `graphics.js` — для отдельного раздела с графиками, как в макетах PAGE_LAYOUTS.md.
+  - `main-params.html` — для постоянной левой части (40%), чтобы избежать дублирования разметки в каждом разделе.
+  - `footer.html` — для футера с логами, чтобы сделать его переиспользуемым и легко обновляемым.
+- **Изменения**:
+  - `dashboard.js` теперь отвечает за инициализацию всего главного экрана (загрузка `main-params.html`, футера и динамической правой части).
+  - `pages/login.html` — остается отдельной, но теперь явно отделена от динамических страниц главного экрана.
+  - Убраны ненужные файлы (если были ранее); структура оптимизирована для модульности (каждый модуль экспортирует функции для ES6 import).
+- **Соответствие требованиям**:
+  - Структура соответствует `FRONTEND_REQUIREMENTS.md`: модульный JS-код, отдельные файлы для логики (app.js, api.js), стили в style.css.
+  - Поддержка адаптивности: в style.css используются медиа-запросы для мобильных устройств (вертикальное расположение карточек).
+  - Масштабируемость: Легко добавить новые страницы (например, `analytics.html` и `analytics.js`) в `pages/` и зарегистрировать в `router.js`.
+- **Рекомендации по реализации**:
+  - В `index.html` добавить контейнеры: `<header id="header"></header>`, `<nav id="nav"></nav>`, `<main><div id="main-params"></div><div id="content"></div></main>`, `<footer id="footer"></footer>`.
+  - В `router.js` загружать контент в `#content` на основе маршрута (например, `#/graphics` → `graphics.html`).
+  - В `utils.js` добавить функции для показа ошибок в ретро-стиле (красный текст на темном фоне).
+  - Для графиков в `graphics.js` использовать Chart.js (подключить через CDN в `index.html`) или Canvas API.
+
+Эта структура готова к реализации. Если нужны дополнительные корректировки (например, добавление папок для ассетов или тестов), уточните.