655 lines
19 KiB
HTML
655 lines
19 KiB
HTML
<!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>
|