Initial commit: полный проект my_speaker
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
<label>Commands File: <input id="commands-file" type="text" /></label>
|
||||
<button id="edit-btn">[ EDIT ]</button>
|
||||
<button id="save-btn">[ SAVE ]</button>
|
||||
<div id="commands-list"></div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="charts-container">
|
||||
<div class="chart-box">
|
||||
<h3>Speech Probability</h3>
|
||||
<canvas id="speech-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<h3>Energy Level</h3>
|
||||
<canvas id="energy-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.charts-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
overflow: visible; /* Убеждаемся, что содержимое не обрезается */
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<h1>== ♩ ♪ ♫ [My Speaker] ♫ ♪ ♩ ==</h1>
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">Your Name:</label>
|
||||
<input id="username" type="text" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Secret Code:</label>
|
||||
<input id="password" type="password" />
|
||||
</div>
|
||||
<button type="submit">[==Let's Go==]</button>
|
||||
</form>
|
||||
<p id="error" class="error"></p>
|
||||
<p>Default: admin / admin</p>
|
||||
<button id="settings-btn">[Settings]</button>
|
||||
<div id="settings-form">
|
||||
<div class="form-group">
|
||||
<label for="main-color">Main Color:</label>
|
||||
<input id="main-color" type="color" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="border-color">Border Color:</label>
|
||||
<input id="border-color" type="color" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bg-color">Background Color:</label>
|
||||
<input id="bg-color" type="color" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="backend-url">Backend URL:</label>
|
||||
<input id="backend-url" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
<p id="status">Status: Listening</p>
|
||||
|
||||
<div class="card-container">
|
||||
<!-- Карточка для речи -->
|
||||
<div class="card">
|
||||
<h3>Речь:</h3>
|
||||
<p>
|
||||
<span id="speech-value">0.00</span> из <span id="speech-max">1.00</span>
|
||||
</p>
|
||||
<p><span id="sp-detect">False</span></p>
|
||||
</div>
|
||||
|
||||
<!-- Карточка для энергии -->
|
||||
<div class="card">
|
||||
<h3>Энергия:</h3>
|
||||
<p><span id="energy-value">0</span> из <span id="energy-max">100</span></p>
|
||||
<p>Шум: <span id="noise-floor">0</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-container">
|
||||
<!-- Карточка для системного монитора -->
|
||||
<div class="system-card">
|
||||
<h3>Системный монитор:</h3>
|
||||
<p>Процессор: <span id="cpu">0%</span></p>
|
||||
<p>Память: <span id="mem">0%</span></p>
|
||||
<p>Температура: <span id="temp">0°C</span></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,654 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Settings</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<style>
|
||||
.settings-section {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background-color: var(--header-color);
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-header:hover {
|
||||
background-color: var(--header-hover-color);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.section-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toggle-icon::after {
|
||||
content: "▼";
|
||||
}
|
||||
|
||||
.section-header.collapsed .toggle-icon::after {
|
||||
content: "►";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Settings</h2>
|
||||
<div class="settings-container">
|
||||
<!-- Вкладка VAD -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>VAD Settings</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<form id="vad-form" class="settings-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Mode:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-mode"
|
||||
name="mode"
|
||||
min="0"
|
||||
max="3"
|
||||
step="1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sample Rate:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-sample-rate"
|
||||
name="sample_rate"
|
||||
min="8000"
|
||||
max="48000"
|
||||
step="100"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frame Duration (ms):</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-frame-duration-ms"
|
||||
name="frame_duration_ms"
|
||||
min="5"
|
||||
max="50"
|
||||
step="1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ring Buffer Size:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-ring-buffer-size"
|
||||
name="ring_buffer_size"
|
||||
min="10"
|
||||
max="100"
|
||||
step="1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Speech Threshold:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-speech-threshold"
|
||||
name="speech_threshold"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Energy Threshold:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-energy-threshold"
|
||||
name="energy_threshold"
|
||||
min="100"
|
||||
max="1000"
|
||||
step="10"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Min Speech Duration (ms):</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-min-speech-duration-ms"
|
||||
name="min_speech_duration_ms"
|
||||
min="50"
|
||||
max="500"
|
||||
step="10"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Record Stop Delay (s):</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-record-stop-delay-sec"
|
||||
name="record_stop_delay_sec"
|
||||
min="0"
|
||||
max="5"
|
||||
step="0.5"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prebuffer Duration (s):</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-prebuffer-duration-sec"
|
||||
name="prebuffer_duration_sec"
|
||||
min="0"
|
||||
max="5"
|
||||
step="0.5"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Max Record Duration (s):</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-max-record-duration-sec"
|
||||
name="max_record_duration_sec"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Target RMS:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-target-rms"
|
||||
name="target_rms"
|
||||
min="1000"
|
||||
max="5000"
|
||||
step="100"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Max Gain:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-max-gain"
|
||||
name="max_gain"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.5"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Noise Reduction Factor:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-noise-reduction-factor"
|
||||
name="noise_reduction_factor"
|
||||
min="1"
|
||||
max="3"
|
||||
step="0.1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Noise Update Alpha:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-noise-update-alpha"
|
||||
name="noise_update_alpha"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Min RMS Threshold Factor:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-min-rms-threshold-factor"
|
||||
name="min_rms_threshold_factor"
|
||||
min="1"
|
||||
max="5"
|
||||
step="0.1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gain Smoothing Alpha:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-gain-smoothing-alpha"
|
||||
name="gain_smoothing_alpha"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adaptive Energy Std Factor:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="vad-adaptive-energy-std-factor"
|
||||
name="adaptive_energy_std_factor"
|
||||
min="1"
|
||||
max="3"
|
||||
step="0.1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adaptive Energy:</td>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vad-adaptive-energy"
|
||||
name="adaptive_energy"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Noise Reduction Enabled:</td>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vad-noise-reduction-enabled"
|
||||
name="noise_reduction_enabled"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Auto Gain Enabled:</td>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vad-auto-gain-enabled"
|
||||
name="auto_gain_enabled"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Record on Speech:</td>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vad-record-on-speech"
|
||||
name="record_on_speech"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button
|
||||
type="button"
|
||||
id="save-vad"
|
||||
class="save-btn"
|
||||
data-section="vad"
|
||||
>
|
||||
Save VAD
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Вкладка System -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>System Settings</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<form id="system-form" class="settings-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>History Max Length:</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="system-history-maxlen"
|
||||
name="history_maxlen"
|
||||
min="10"
|
||||
max="100"
|
||||
step="1"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Polling Interval (ms):</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
id="system-polling-interval-ms"
|
||||
name="polling_interval_ms"
|
||||
min="500"
|
||||
max="5000"
|
||||
step="100"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Logging Level:</td>
|
||||
<td>
|
||||
<select id="system-logging-level" name="logging_level">
|
||||
<option>DEBUG</option>
|
||||
<option>INFO</option>
|
||||
<option>WARNING</option>
|
||||
<option>ERROR</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Log File:</td>
|
||||
<td>
|
||||
<input type="text" id="system-log-file" name="log_file" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Log Save File:</td>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="system-log-save-file"
|
||||
name="log_save_file"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button
|
||||
type="button"
|
||||
id="save-system"
|
||||
class="save-btn"
|
||||
data-section="system"
|
||||
>
|
||||
Save System
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Вкладка STT -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>STT Settings</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<form id="stt-form" class="settings-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Model Path:</td>
|
||||
<td>
|
||||
<input type="text" id="stt-model-path" name="model_path" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button
|
||||
type="button"
|
||||
id="save-stt"
|
||||
class="save-btn"
|
||||
data-section="stt"
|
||||
>
|
||||
Save STT
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Вкладка Commands -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>Commands Settings</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<form id="commands-form" class="settings-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Commands File:</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
id="commands-commands-file"
|
||||
name="commands_file"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button
|
||||
type="button"
|
||||
id="save-commands"
|
||||
class="save-btn"
|
||||
data-section="commands"
|
||||
>
|
||||
Save Commands
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Вкладка Auth -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>Auth Settings</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<form id="auth-form" class="settings-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Username:</td>
|
||||
<td>
|
||||
<input type="text" id="auth-username" name="username" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Password:</td>
|
||||
<td>
|
||||
<input type="password" id="auth-password" name="password" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button
|
||||
type="button"
|
||||
id="save-auth"
|
||||
class="save-btn"
|
||||
data-section="auth"
|
||||
>
|
||||
Save Auth
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Настройки TTS -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>TTS Settings</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<form id="tts-form">
|
||||
<div class="form-group">
|
||||
<label for="host">Host:</label>
|
||||
<input type="text" id="host" name="host" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="port">Port:</label>
|
||||
<input type="number" id="port" name="port" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timeout">Timeout (seconds):</label>
|
||||
<input type="number" id="timeout" name="timeout" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pause_duration">Pause Duration (seconds):</label>
|
||||
<input
|
||||
type="number"
|
||||
id="pause_duration"
|
||||
name="pause_duration"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="post_stop_wait">Post Stop Wait (seconds):</label>
|
||||
<input
|
||||
type="number"
|
||||
id="post_stop_wait"
|
||||
name="post_stop_wait"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="voice">Voice:</label>
|
||||
<input type="text" id="voice" name="voice" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="save_TTS_files">Save TTS Files:</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="save_TTS_files"
|
||||
name="save_TTS_files"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" class="save-btn" data-section="tts">
|
||||
Save TTS Settings
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Настройки аудио -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>Audio Settings</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<form id="audio-settings-form">
|
||||
<div class="form-group">
|
||||
<label for="playback_device">Playback Device:</label>
|
||||
<input
|
||||
type="number"
|
||||
id="playback_device"
|
||||
name="playback_device"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="capture_device">Capture Device:</label>
|
||||
<input type="number" id="capture_device" name="capture_device" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="playback_volume">Playback Volume:</label>
|
||||
<input
|
||||
type="range"
|
||||
id="playback_volume"
|
||||
name="playback_volume"
|
||||
min="0"
|
||||
max="100"
|
||||
step="10"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="capture_volume">Capture Volume:</label>
|
||||
<input
|
||||
type="range"
|
||||
id="capture_volume"
|
||||
name="capture_volume"
|
||||
min="0"
|
||||
max="100"
|
||||
step="10"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="save-btn"
|
||||
data-section="audio_settings"
|
||||
>
|
||||
Save Audio Settings
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка переинициализации -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header collapsed">
|
||||
<h3>System Control</h3>
|
||||
<span class="toggle-icon"></span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<button type="button" id="restart-btn">Restart VAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Получаем все заголовки секций
|
||||
const sectionHeaders = document.querySelectorAll(".section-header");
|
||||
|
||||
// Добавляем обработчик клика для каждого заголовка
|
||||
sectionHeaders.forEach((header) => {
|
||||
header.addEventListener("click", function () {
|
||||
// Получаем содержимое секции
|
||||
const content = this.nextElementSibling;
|
||||
|
||||
// Если секция уже активна, просто сворачиваем её
|
||||
if (!this.classList.contains("collapsed")) {
|
||||
this.classList.add("collapsed");
|
||||
content.classList.remove("active");
|
||||
return;
|
||||
}
|
||||
|
||||
// Сворачиваем все секции
|
||||
document.querySelectorAll(".section-header").forEach((h) => {
|
||||
h.classList.add("collapsed");
|
||||
h.nextElementSibling.classList.remove("active");
|
||||
});
|
||||
|
||||
// Разворачиваем текущую секцию
|
||||
this.classList.remove("collapsed");
|
||||
content.classList.add("active");
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user