sirmrak/my_speaker_RPi3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c574533f632619dd6624ac409d85e508edd40483
my_speaker_RPi3/docs/FRONTEND_REQUIREMENTS.md
T
sirmrak c574533f63 Initial commit
2025-12-25 12:01:35 +03:00

18 KiB
Raw Blame History

Техническое задание на разработку фронтенда 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. Авторизация

// Пример функции авторизации
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. Получение данных о речи

// Пример функции получения данных о речи
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. Обновление настроек

// Пример функции обновления настроек 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. Соответствие требованиям производительности
Reference in New Issue View Git Blame Copy Permalink