Initial commit
This commit is contained in:
@@ -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