344 lines
18 KiB
Markdown
344 lines
18 KiB
Markdown
# Техническое задание на разработку фронтенда 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. Соответствие требованиям производительности
|