sirmrak/satellite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: WebSocket команды — раздельная громкость mic/snd + запись аудио + обновлённый web-client

Browse Source 
- satellite.py: разделён _runtime_volume на _runtime_mic_volume и _runtime_snd_volume
- satellite.py: добавлены команды start_recording/stop_recording (WAV через base64)
- satellite.py: метод _create_wav_from_buffer() для создания WAV из буфера
- web-client: добавлен слайдер громкости микрофона (MIC+/MIC-)
- web-client: добавлены кнопки записи и воспроизведения аудио
- web-client: улучшенный лог событий и отладочные console.log
- docs: websocket-server-plan.md сокращён с 1205 до ~80 строк

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
sirmrak
2026-05-25 17:58:37 +03:00
co-authored by Qwen-Coder
parent 61294485ad
commit 2b4e6f824b
7 changed files with 2017 additions and 1209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/development/websocket-server-plan.md
+43 -1118
View File
File diff suppressed because it is too large Load Diff
web-client/assist.html
+675
View File
@@ -0,0 +1,675 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>NOVA Assistant</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background: radial-gradient(circle at 30% 20%, #0a0f1e, #03060c);
font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Фоновые частицы */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: rgba(0, 255, 255, 0.3);
border-radius: 50%;
animation: float 20s infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}
/* Главный контейнер */
.assistant-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
padding: 40px;
max-width: 600px;
width: 100%;
}
/* Статус подключения */
.connection-badge {
position: absolute;
top: 30px;
right: 30px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
padding: 12px 20px;
border-radius: 50px;
border: 1px solid rgba(0, 255, 255, 0.3);
font-size: 14px;
color: #b0e0ff;
font-weight: 500;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff4d4d;
box-shadow: 0 0 10px #ff4d4d;
transition: all 0.3s;
}
.status-dot.connected {
background: #0ff;
box-shadow: 0 0 20px #0ff;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.8; }
}
/* Главная сфера (ORB) */
.orb-container {
position: relative;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.orb {
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #00ffff, #0066aa);
box-shadow:
0 0 60px rgba(0, 255, 255, 0.4),
inset 0 0 40px rgba(255, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
/* Анимация пульсации при прослушивании */
.orb.listening {
animation: orb-pulse 1.5s ease-in-out infinite;
box-shadow:
0 0 100px rgba(0, 255, 255, 0.8),
0 0 150px rgba(0, 255, 255, 0.4),
inset 0 0 60px rgba(255, 255, 255, 0.2);
}
@keyframes orb-pulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 60px rgba(0, 255, 255, 0.4),
inset 0 0 40px rgba(255, 255, 255, 0.1);
}
50% {
transform: scale(1.05);
box-shadow:
0 0 120px rgba(0, 255, 255, 0.8),
0 0 180px rgba(0, 255, 255, 0.5),
inset 0 0 80px rgba(255, 255, 255, 0.3);
}
}
/* Анимация при говорении */
.orb.speaking {
animation: orb-speak 0.8s ease-in-out infinite;
background: radial-gradient(circle at 35% 35%, #ff00ff, #ff0088);
box-shadow:
0 0 100px rgba(255, 0, 255, 0.6),
0 0 150px rgba(255, 0, 255, 0.3);
}
@keyframes orb-speak {
0%, 100% { transform: scale(1); }
25% { transform: scale(1.03); }
75% { transform: scale(0.98); }
}
/* RMS визуализация внутри сферы */
.orb-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wave-bar {
width: 6px;
height: 20px;
background: rgba(255, 255, 255, 0.6);
border-radius: 3px;
transition: height 0.1s ease;
}
/* Статус текст */
.status-text {
font-size: 24px;
font-weight: 600;
color: #00ffff;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
animation: text-glow 2s ease-in-out infinite;
}
@keyframes text-glow {
0%, 100% { text-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
50% { text-shadow: 0 0 40px rgba(0, 255, 255, 0.8); }
}
/* Контейнер громкости */
.volume-container {
width: 100%;
max-width: 400px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 255, 255, 0.3);
border-radius: 30px;
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
}
.volume-header {
display: flex;
justify-content: space-between;
align-items: center;
color: #b0e0ff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
}
.volume-value {
font-size: 24px;
font-weight: 700;
color: #00ffff;
font-family: 'Courier New', monospace;
}
/* Слайдер громкости */
.volume-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: rgba(0, 255, 255, 0.2);
border-radius: 10px;
outline: none;
transition: all 0.3s;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: #00ffff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
transition: all 0.2s;
}
.volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 30px rgba(0, 255, 255, 1);
}
.volume-slider::-moz-range-thumb {
width: 24px;
height: 24px;
background: #00ffff;
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
transition: all 0.2s;
}
.volume-slider::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 30px rgba(0, 255, 255, 1);
}
/* Кнопки быстрой регулировки */
.volume-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
.vol-btn {
background: rgba(0, 255, 255, 0.1);
border: 1px solid rgba(0, 255, 255, 0.5);
color: #00ffff;
padding: 12px 24px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
backdrop-filter: blur(10px);
}
.vol-btn:hover {
background: rgba(0, 255, 255, 0.3);
border-color: #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
transform: translateY(-2px);
}
.vol-btn:active {
transform: translateY(0);
}
/* Последняя фраза */
.transcript-box {
width: 100%;
max-width: 500px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
border: 1px solid rgba(0, 255, 255, 0.2);
border-radius: 20px;
padding: 20px;
min-height: 80px;
display: flex;
flex-direction: column;
gap: 10px;
}
.transcript-label {
font-size: 12px;
color: #7f9fcf;
text-transform: uppercase;
letter-spacing: 2px;
}
.transcript-text {
font-size: 18px;
color: #eef5ff;
font-style: italic;
line-height: 1.6;
}
/* Адаптивность */
@media (max-width: 768px) {
.assistant-container {
padding: 20px;
gap: 30px;
}
.orb-container {
width: 250px;
height: 250px;
}
.orb {
width: 200px;
height: 200px;
}
.status-text {
font-size: 20px;
}
.connection-badge {
top: 20px;
right: 20px;
font-size: 12px;
padding: 10px 16px;
}
}
</style>
</head>
<body>
<!-- Фоновые частицы -->
<div class="particles" id="particles"></div>
<!-- Статус подключения -->
<div class="connection-badge">
<div class="status-dot" id="statusDot"></div>
<span id="statusLabel">Отключено</span>
</div>
<!-- Главный контейнер -->
<div class="assistant-container">
<!-- Сфера с анимацией -->
<div class="orb-container">
<div class="orb" id="orb">
<div class="orb-waves" id="orbWaves">
<!-- Волны будут добавлены через JS -->
</div>
</div>
</div>
<!-- Статус -->
<div class="status-text" id="statusText">В ОЖИДАНИИ</div>
<!-- Управление громкостью -->
<div class="volume-container">
<div class="volume-header">
<span>🔊 Громкость</span>
<span class="volume-value" id="volumeValue">80%</span>
</div>
<input type="range" class="volume-slider" id="volumeSlider"
min="0" max="100" value="80" step="1">
<div class="volume-buttons">
<button class="vol-btn" id="volDownBtn">🔉 -10%</button>
<button class="vol-btn" id="volUpBtn">🔊 +10%</button>
</div>
</div>
<!-- Последняя фраза -->
<div class="transcript-box">
<div class="transcript-label">💬 Последняя фраза</div>
<div class="transcript-text" id="transcriptText">—</div>
</div>
</div>
<script>
// ==================== КОНФИГУРАЦИЯ ====================
const WS_URL = 'ws://192.168.200.111:8675';
const NUM_WAVE_BARS = 12;
const NUM_PARTICLES = 30;
// ==================== СОСТОЯНИЕ ====================
let ws = null;
let isConnected = false;
let currentVolume = 0.8;
let currentRms = 0.0;
let currentState = 'idle'; // idle, listening, speaking
// ==================== DOM ЭЛЕМЕНТЫ ====================
const statusDot = document.getElementById('statusDot');
const statusLabel = document.getElementById('statusLabel');
const orb = document.getElementById('orb');
const orbWaves = document.getElementById('orbWaves');
const statusText = document.getElementById('statusText');
const volumeSlider = document.getElementById('volumeSlider');
const volumeValue = document.getElementById('volumeValue');
const volUpBtn = document.getElementById('volUpBtn');
const volDownBtn = document.getElementById('volDownBtn');
const transcriptText = document.getElementById('transcriptText');
// ==================== ИНИЦИАЛИЗАЦИЯ ====================
// Создать волновые бары
function initWaveBars() {
orbWaves.innerHTML = '';
for (let i = 0; i < NUM_WAVE_BARS; i++) {
const bar = document.createElement('div');
bar.className = 'wave-bar';
bar.dataset.index = i;
orbWaves.appendChild(bar);
}
}
// Создать фоновые частицы
function initParticles() {
const particles = document.getElementById('particles');
for (let i = 0; i < NUM_PARTICLES; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 20 + 's';
particle.style.animationDuration = (15 + Math.random() * 10) + 's';
particles.appendChild(particle);
}
}
// ==================== АНИМАЦИЯ ВОЛН ====================
function animateWaves() {
const bars = orbWaves.querySelectorAll('.wave-bar');
bars.forEach((bar, index) => {
let height = 20;
if (currentState === 'listening' || currentState === 'speaking') {
// Анимация на основе RMS
const rmsScaled = Math.min(1, currentRms * 5); // Усиление RMS
const baseHeight = 20 + rmsScaled * 80;
const wave = Math.sin(Date.now() / 200 + index * 0.5) * 20;
height = baseHeight + wave;
} else {
// Минимальная анимация в idle
height = 20 + Math.sin(Date.now() / 500 + index * 0.3) * 5;
}
bar.style.height = height + 'px';
});
requestAnimationFrame(animateWaves);
}
// ==================== WEBSOCKET ====================
function connectWebSocket() {
if (ws && ws.readyState === WebSocket.OPEN) {
return;
}
ws = new WebSocket(WS_URL);
ws.onopen = () => {
isConnected = true;
statusDot.classList.add('connected');
statusLabel.textContent = 'Подключено';
console.log('✅ WebSocket connected');
};
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
handleEvent(data);
} catch (e) {
console.error('Parse error:', e);
}
};
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = () => {
isConnected = false;
statusDot.classList.remove('connected');
statusLabel.textContent = 'Отключено';
currentState = 'idle';
updateOrbState();
console.log('❌ WebSocket disconnected');
// Переподключение через 3 секунды
setTimeout(connectWebSocket, 3000);
};
}
// ==================== ОБРАБОТКА СОБЫТИЙ ====================
function handleEvent(data) {
const eventType = data.type || data.event;
switch (eventType) {
case 'audio-level':
if (data.data && data.data.level !== undefined) {
currentRms = data.data.level;
}
break;
case 'voice-started':
currentState = 'listening';
statusText.textContent = 'СЛУШАЮ';
updateOrbState();
break;
case 'voice-stopped':
currentState = 'idle';
statusText.textContent = 'ОБРАБОТКА';
updateOrbState();
break;
case 'transcript':
if (data.data && data.data.text) {
transcriptText.textContent = `"${data.data.text}"`;
}
break;
case 'synthesize':
if (data.data && data.data.text) {
transcriptText.textContent = `"${data.data.text}"`;
}
break;
case 'tts-start':
case 'audio-start':
currentState = 'speaking';
statusText.textContent = 'ГОВОРЮ';
updateOrbState();
break;
case 'tts-stop':
case 'audio-stop':
case 'played':
// Проверяем что мы действительно были в режиме speaking
if (currentState === 'speaking') {
currentState = 'idle';
statusText.textContent = 'В ОЖИДАНИИ';
updateOrbState();
}
break;
case 'streaming-started':
currentState = 'listening';
statusText.textContent = 'АКТИВЕН';
updateOrbState();
break;
case 'streaming-stopped':
// Только если мы были в listening, переходим в idle
if (currentState === 'listening') {
currentState = 'idle';
statusText.textContent = 'В ОЖИДАНИИ';
updateOrbState();
}
break;
case 'stt-start':
currentState = 'listening';
statusText.textContent = 'СЛУШАЮ';
updateOrbState();
break;
case 'stt-stop':
currentState = 'idle';
statusText.textContent = 'ОБРАБОТКА';
updateOrbState();
break;
}
}
// ==================== ОБНОВЛЕНИЕ СОСТОЯНИЯ СФЕРЫ ====================
function updateOrbState() {
orb.classList.remove('listening', 'speaking');
if (currentState === 'listening') {
orb.classList.add('listening');
} else if (currentState === 'speaking') {
orb.classList.add('speaking');
}
}
// ==================== УПРАВЛЕНИЕ ГРОМКОСТЬЮ ====================
function sendVolumeCommand(level) {
if (!ws || ws.readyState !== WebSocket.OPEN) {
console.warn('WebSocket not connected');
return;
}
const msg = JSON.stringify({
command: 'set_volume',
data: { level: level }
});
ws.send(msg);
}
function updateVolume(newVolume) {
currentVolume = Math.max(0, Math.min(1, newVolume));
volumeSlider.value = Math.round(currentVolume * 100);
volumeValue.textContent = Math.round(currentVolume * 100) + '%';
sendVolumeCommand(currentVolume);
}
// ==================== ОБРАБОТЧИКИ СОБЫТИЙ ====================
volumeSlider.addEventListener('input', (e) => {
const value = parseInt(e.target.value) / 100;
updateVolume(value);
});
volUpBtn.addEventListener('click', () => {
updateVolume(currentVolume + 0.1);
});
volDownBtn.addEventListener('click', () => {
updateVolume(currentVolume - 0.1);
});
// ==================== ЗАПУСК ====================
window.addEventListener('load', () => {
console.log('🚀 NOVA Assistant initialized');
initWaveBars();
initParticles();
animateWaves();
connectWebSocket();
});
</script>
</body>
</html>
web-client/client.html
+354 -76
View File
@@ -335,14 +335,51 @@
</div>
<div class="flex-between" style="width:100%; margin-top: 8px;">
<span>🔊 VOLUME</span>
<span>🔊 SPEAKER</span>
<span id="volumeValue" style="color:#0ff">0.80</span>
</div>
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.8" class="volume-slider">
<div class="flex-between" style="width:100%; margin-top: 12px;">
<span>🎤 MICROPHONE</span>
<span id="micVolumeValue" style="color:#0ff">1.00</span>
</div>
<input type="range" id="micVolumeSlider" min="0" max="2" step="0.01" value="1.0" class="volume-slider">
<div class="command-group" style="justify-content: center;">
<button id="muteBtn" class="neo-btn">🔇 MUTE</button>
<button id="unmuteBtn" class="neo-btn">🎤 UNMUTE</button>
</div>
<!-- Audio Recording Controls -->
<div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(0,255,255,0.2);">
<div class="flex-between" style="margin-bottom: 10px;">
<span style="color: #aaa; font-size: 12px;">🎙️ AUDIO RECORDING</span>
<span id="recordingStatus" style="color:#ff4d4d; font-family: monospace; font-size: 12px;">⏹️ STOPPED</span>
</div>
<div class="command-group" style="justify-content: center;">
<button id="startRecordingBtn" class="neo-btn">🔴 START REC</button>
<button id="stopRecordingBtn" class="neo-btn danger-btn" disabled>⏹️ STOP REC</button>
</div>
<div id="recordingInfo" style="margin-top: 10px; color: #aaa; font-size: 11px; text-align: center; display: none;">
<span id="recordingDuration">0.0s</span> • <span id="recordingSize">0 KB</span>
</div>
<!-- Audio Player -->
<div id="audioPlayerContainer" style="margin-top: 15px; display: none;">
<div style="background: rgba(0,0,0,0.3); border-radius: 12px; padding: 12px;">
<div class="flex-between" style="margin-bottom: 8px;">
<span style="color: #0ff; font-size: 11px;">🎵 ПОСЛЕДНЯЯ ЗАПИСЬ</span>
<span id="lastRecordingName" style="color: #aaa; font-size: 10px;">—</span>
</div>
<audio id="audioPlayer" controls style="width: 100%; height: 32px; border-radius: 8px;"></audio>
<div class="command-group" style="justify-content: center; margin-top: 8px; margin-bottom: 0;">
<button id="downloadRecordingBtn" class="neo-btn" style="font-size: 0.7rem; padding: 6px 12px;">💾 DOWNLOAD</button>
<button id="deleteRecordingBtn" class="neo-btn danger-btn" style="font-size: 0.7rem; padding: 6px 12px;">🗑️ DELETE</button>
</div>
</div>
</div>
</div>
</div>
<!-- ЦЕНТР: команды и транскрипция -->
@@ -356,9 +393,10 @@
<button id="stopTimerBtn" class="neo-btn">⏲️ STOP TIMER</button>
</div>
<div class="command-group">
<button id="volUpBtn" class="neo-btn">➕ VOL+</button>
<button id="volDownBtn" class="neo-btn">➖ VOL-</button>
<button id="requestRmsBtn" class="neo-btn">📊 REQUEST RMS</button>
<button id="volUpBtn" class="neo-btn">🔊 VOL+</button>
<button id="volDownBtn" class="neo-btn">🔉 VOL-</button>
<button id="micUpBtn" class="neo-btn">🎤 MIC+</button>
<button id="micDownBtn" class="neo-btn">🎙️ MIC-</button>
</div>
<div class="command-group">
<button id="singlePressBtn" class="neo-btn">🔘 SINGLE</button>
@@ -409,6 +447,7 @@
let source = null;
let mediaStream = null;
let rmsTimeout = null;
let currentRms = 0.0; // ✅ Текущий RMS уровень от satellite
const canvas = document.getElementById('audioCanvas');
const ctx = canvas.getContext('2d');
@@ -492,14 +531,76 @@
addEventToLog(`📤 cmd: ${command}`);
}
// Recording state
let isRecording = false;
let recordingStartTime = null;
let lastRecordingBlob = null;
let lastRecordingUrl = null;
let lastRecordingFilename = null;
// Обработчик входящих событий от satellite
function handleIncomingMessage(ev) {
try {
const json = JSON.parse(ev.data);
const eventType = json.type || json.event;
// Recording events
if(eventType === 'recording-ready') {
if(json.data) {
const duration = json.data.duration || 0;
const size = json.data.size || 0;
const base64Data = json.data.data;
addEventToLog(`🎙️ Запись готова: ${duration.toFixed(1)}s, ${(size/1024).toFixed(1)} KB`);
// Декодировать base64 и создать blob
try {
const audioData = atob(base64Data);
const bytes = new Uint8Array(audioData.length);
for (let i = 0; i < audioData.length; i++) {
bytes[i] = audioData.charCodeAt(i);
}
const blob = new Blob([bytes], { type: 'audio/wav' });
// Сохранить для плеера
if(lastRecordingUrl) {
URL.revokeObjectURL(lastRecordingUrl);
}
lastRecordingBlob = blob;
lastRecordingUrl = URL.createObjectURL(blob);
lastRecordingFilename = `recording_${new Date().toISOString().replace(/[:.]/g, '-')}.wav`;
// Показать плеер
const audioPlayer = document.getElementById('audioPlayer');
const audioPlayerContainer = document.getElementById('audioPlayerContainer');
const lastRecordingName = document.getElementById('lastRecordingName');
console.log('🎵 Showing audio player:', {
audioPlayer: !!audioPlayer,
audioPlayerContainer: !!audioPlayerContainer,
lastRecordingName: !!lastRecordingName,
url: lastRecordingUrl
});
if(audioPlayer && audioPlayerContainer && lastRecordingName) {
audioPlayer.src = lastRecordingUrl;
audioPlayerContainer.style.display = 'block';
lastRecordingName.innerText = lastRecordingFilename;
addEventToLog(`🎵 Запись готова к прослушиванию`);
console.log('✅ Audio player shown successfully');
} else {
console.error('❌ Audio player elements not found!');
addEventToLog(`❌ Плеер не найден на странице`);
}
} catch(e) {
console.error('❌ Recording decode error:', e);
addEventToLog(`❌ Ошибка декодирования записи: ${e.message}`);
}
}
}
// Audio level events
if(eventType === 'audio-level') {
else if(eventType === 'audio-level') {
if(json.data && json.data.level !== undefined) {
const level = json.data.level;
currentRms = level; // ✅ Обновляем currentRms для визуализации
@@ -727,94 +828,271 @@
}
}
// Кнопки подключения
document.getElementById('connectBtn').addEventListener('click', toggleConnection);
document.getElementById('connectBtnCard').addEventListener('click', toggleConnection);
// Auto-connect при загрузке
// ✅ ЕДИНЫЙ ОБРАБОТЧИК ЗАГРУЗКИ DOM
window.addEventListener('load', () => {
console.log('🚀 DOM loaded, initializing...');
addEventToLog('🤖 Wyoming Droid Assistant • готов к подключению');
// Инициализация RMS элементов после загрузки DOM
// Инициализация RMS элементов
const rmsFillEl = document.getElementById('rmsFill');
const rmsValueEl = document.getElementById('rmsValue');
if (rmsFillEl && rmsValueEl) {
console.log('RMS meter initialized');
console.log('✅ RMS meter initialized');
}
// ✅ РЕГИСТРАЦИЯ ВСЕХ КНОПОК
console.log('🔘 Registering button handlers...');
// Кнопки подключения
const connectBtn = document.getElementById('connectBtn');
const connectBtnCard = document.getElementById('connectBtnCard');
if (connectBtn) connectBtn.addEventListener('click', toggleConnection);
if (connectBtnCard) connectBtnCard.addEventListener('click', toggleConnection);
// Volume control buttons
const startListeningBtn = document.getElementById('startListeningBtn');
const stopPipelineBtn = document.getElementById('stopPipelineBtn');
const stopTimerBtn = document.getElementById('stopTimerBtn');
const muteBtn = document.getElementById('muteBtn');
const unmuteBtn = document.getElementById('unmuteBtn');
const volUpBtn = document.getElementById('volUpBtn');
const volDownBtn = document.getElementById('volDownBtn');
const requestRmsBtn = document.getElementById('requestRmsBtn');
const clearEventsBtn = document.getElementById('clearEvents');
if (startListeningBtn) startListeningBtn.addEventListener('click', () => sendCommand('set_volume', { level: 1.0 }));
if (stopPipelineBtn) stopPipelineBtn.addEventListener('click', () => sendCommand('mute', {}));
if (stopTimerBtn) stopTimerBtn.addEventListener('click', () => sendCommand('unmute', {}));
if (muteBtn) muteBtn.addEventListener('click', () => sendCommand('mute', {}));
if (unmuteBtn) unmuteBtn.addEventListener('click', () => sendCommand('unmute', {}));
if (volUpBtn) volUpBtn.addEventListener('click', () => {
const newVol = Math.min(1.0, currentVolume + 0.1);
currentVolume = newVol;
sendCommand('set_volume', { level: newVol });
volumeSlider.value = newVol;
volumeValueSpan.innerText = newVol.toFixed(2);
});
if (volDownBtn) volDownBtn.addEventListener('click', () => {
const newVol = Math.max(0.0, currentVolume - 0.1);
currentVolume = newVol;
sendCommand('set_volume', { level: newVol });
volumeSlider.value = newVol;
volumeValueSpan.innerText = newVol.toFixed(2);
});
if (requestRmsBtn) requestRmsBtn.addEventListener('click', () => {
sendCommand('trigger_event', { event_type: 'request_audio_level', data: {} });
addEventToLog('📊 Запрошено обновление RMS');
});
// Gesture buttons
const singlePressBtn = document.getElementById('singlePressBtn');
const doublePressBtn = document.getElementById('doublePressBtn');
const triplePressBtn = document.getElementById('triplePressBtn');
const longPressBtn = document.getElementById('longPressBtn');
if (singlePressBtn) singlePressBtn.addEventListener('click', () => sendCommand('trigger_event', { event_type: 'single_press', data: {} }));
if (doublePressBtn) doublePressBtn.addEventListener('click', () => sendCommand('trigger_event', { event_type: 'double_press', data: {} }));
if (triplePressBtn) triplePressBtn.addEventListener('click', () => sendCommand('trigger_event', { event_type: 'triple_press', data: {} }));
if (longPressBtn) longPressBtn.addEventListener('click', () => sendCommand('trigger_event', { event_type: 'long_press', data: {} }));
if (clearEventsBtn) clearEventsBtn.addEventListener('click', () => {
while(eventFeedDiv.children.length > 1) eventFeedDiv.removeChild(eventFeedDiv.lastChild);
addEventToLog('🧹 Лог очищен');
});
// ✅ РЕГИСТРАЦИЯ СЛАЙДЕРОВ
const slider = document.getElementById('volumeSlider');
if (slider) {
console.log('✅ Volume slider found, attaching event listener');
slider.addEventListener('input', (e) => {
const val = parseFloat(e.target.value);
console.log('🎚️ Speaker slider changed:', val);
currentVolume = val;
volumeValueSpan.innerText = val.toFixed(2);
liveVolSpan.innerText = Math.round(val * 100) + '%';
console.log('📤 Sending set_volume command:', val);
sendCommand('set_volume', { level: val });
});
console.log('✅ Speaker slider event listener attached successfully');
} else {
console.error('❌ Volume slider NOT FOUND!');
}
// ✅ РЕГИСТРАЦИЯ СЛАЙДЕРА МИКРОФОНА
let currentMicVolume = 1.0;
const micSlider = document.getElementById('micVolumeSlider');
const micVolumeValueSpan = document.getElementById('micVolumeValue');
if (micSlider && micVolumeValueSpan) {
console.log('✅ Microphone slider found, attaching event listener');
micSlider.addEventListener('input', (e) => {
const val = parseFloat(e.target.value);
console.log('🎤 Mic slider changed:', val);
currentMicVolume = val;
micVolumeValueSpan.innerText = val.toFixed(2);
console.log('📤 Sending set_mic_volume command:', val);
sendCommand('set_mic_volume', { level: val });
});
console.log('✅ Microphone slider event listener attached successfully');
} else {
console.error('❌ Microphone slider NOT FOUND!');
}
// ✅ КНОПКИ MIC+ / MIC-
const micUpBtn = document.getElementById('micUpBtn');
const micDownBtn = document.getElementById('micDownBtn');
if (micUpBtn) {
micUpBtn.addEventListener('click', () => {
const newVol = Math.min(2.0, currentMicVolume + 0.1);
currentMicVolume = newVol;
sendCommand('set_mic_volume', { level: newVol });
micSlider.value = newVol;
micVolumeValueSpan.innerText = newVol.toFixed(2);
addEventToLog(`🎤 Чувствительность микрофона: ${Math.round(newVol * 100)}%`);
});
console.log('✅ MIC+ button registered');
}
if (micDownBtn) {
micDownBtn.addEventListener('click', () => {
const newVol = Math.max(0.0, currentMicVolume - 0.1);
currentMicVolume = newVol;
sendCommand('set_mic_volume', { level: newVol });
micSlider.value = newVol;
micVolumeValueSpan.innerText = newVol.toFixed(2);
addEventToLog(`🎤 Чувствительность микрофона: ${Math.round(newVol * 100)}%`);
});
console.log('✅ MIC- button registered');
}
// ✅ КНОПКИ ЗАПИСИ
const startRecordingBtn = document.getElementById('startRecordingBtn');
const stopRecordingBtn = document.getElementById('stopRecordingBtn');
const recordingStatus = document.getElementById('recordingStatus');
const recordingInfo = document.getElementById('recordingInfo');
const recordingDuration = document.getElementById('recordingDuration');
const recordingSize = document.getElementById('recordingSize');
if (startRecordingBtn && stopRecordingBtn) {
startRecordingBtn.addEventListener('click', () => {
if(!isConnected) {
addEventToLog('❌ Нет подключения к satellite');
return;
}
sendCommand('start_recording', {});
isRecording = true;
recordingStartTime = Date.now();
// Обновить UI
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = false;
recordingStatus.innerText = '🔴 RECORDING';
recordingStatus.style.color = '#ff4d4d';
recordingInfo.style.display = 'block';
// Обновлять длительность каждую секунду
const updateDuration = setInterval(() => {
if(!isRecording) {
clearInterval(updateDuration);
return;
}
const elapsed = (Date.now() - recordingStartTime) / 1000;
recordingDuration.innerText = elapsed.toFixed(1) + 's';
}, 100);
addEventToLog('🔴 Запись началась');
});
stopRecordingBtn.addEventListener('click', () => {
if(!isRecording) return;
sendCommand('stop_recording', {});
isRecording = false;
// Обновить UI
startRecordingBtn.disabled = false;
stopRecordingBtn.disabled = true;
recordingStatus.innerText = '⏹️ STOPPED';
recordingStatus.style.color = '#aaa';
addEventToLog('⏹️ Запись остановлена, ожидание файла...');
});
console.log('✅ Recording buttons registered');
}
// ✅ КНОПКИ ПЛЕЕРА
const downloadRecordingBtn = document.getElementById('downloadRecordingBtn');
const deleteRecordingBtn = document.getElementById('deleteRecordingBtn');
const audioPlayerContainer = document.getElementById('audioPlayerContainer');
const audioPlayer = document.getElementById('audioPlayer');
if (downloadRecordingBtn) {
downloadRecordingBtn.addEventListener('click', () => {
if(!lastRecordingBlob || !lastRecordingFilename) {
addEventToLog('❌ Нет записи для скачивания');
return;
}
const url = URL.createObjectURL(lastRecordingBlob);
const a = document.createElement('a');
a.href = url;
a.download = lastRecordingFilename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
addEventToLog(`💾 Файл скачан: ${lastRecordingFilename}`);
});
console.log('✅ Download recording button registered');
}
if (deleteRecordingBtn && audioPlayerContainer && audioPlayer) {
deleteRecordingBtn.addEventListener('click', () => {
if(!lastRecordingBlob) {
addEventToLog('❌ Нет записи для удаления');
return;
}
// Остановить воспроизведение
audioPlayer.pause();
audioPlayer.src = '';
// Очистить данные
if(lastRecordingUrl) {
URL.revokeObjectURL(lastRecordingUrl);
}
lastRecordingBlob = null;
lastRecordingUrl = null;
lastRecordingFilename = null;
// Скрыть плеер
audioPlayerContainer.style.display = 'none';
addEventToLog('🗑️ Запись удалена');
});
console.log('✅ Delete recording button registered');
}
console.log('✅ All handlers registered');
// Auto-connect если включена опция
const autoConnect = document.getElementById('autoConnect');
if(autoConnect && autoConnect.checked) {
setTimeout(() => {
console.log('🔌 Auto-connecting...');
addEventToLog('📡 Auto-connect...');
toggleConnection();
}, 500);
}
});
// Volume control
document.getElementById('startListeningBtn').addEventListener('click', () => sendCommand('set_volume', { level: 1.0 }));
document.getElementById('stopPipelineBtn').addEventListener('click', () => sendCommand('mute', {}));
document.getElementById('stopTimerBtn').addEventListener('click', () => sendCommand('unmute', {}));
document.getElementById('muteBtn').addEventListener('click', () => sendCommand('mute', {}));
document.getElementById('unmuteBtn').addEventListener('click', () => sendCommand('unmute', {}));
document.getElementById('volUpBtn').addEventListener('click', () => {
const newVol = Math.min(1.0, currentVolume + 0.1);
currentVolume = newVol; // ✅ Обновляем currentVolume
sendCommand('set_volume', { level: newVol });
volumeSlider.value = newVol;
volumeValueSpan.innerText = newVol.toFixed(2);
});
document.getElementById('volDownBtn').addEventListener('click', () => {
const newVol = Math.max(0.0, currentVolume - 0.1);
currentVolume = newVol; // ✅ Обновляем currentVolume
sendCommand('set_volume', { level: newVol });
volumeSlider.value = newVol;
volumeValueSpan.innerText = newVol.toFixed(2);
});
// Request RMS button
document.getElementById('requestRmsBtn').addEventListener('click', () => {
// Запросить обновление audio-level (сателит отправляет их автоматически)
// Отправляем dummy команду для триггера
sendCommand('trigger_event', { event_type: 'request_audio_level', data: {} });
addEventToLog('📊 Запрошено обновление RMS');
});
document.getElementById('pauseMediaBtn').addEventListener('click', () => sendCommand('play_sound', { path: '/home/sirmrak/projects/satellite-dev/sounds/awake.wav' }));
document.getElementById('resumeMediaBtn').addEventListener('click', () => sendCommand('play_sound', { path: '/home/sirmrak/projects/satellite-dev/sounds/done.wav' }));
document.getElementById('stopMediaBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'stop', data: {} }));
document.getElementById('singlePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'single_press', data: {} }));
document.getElementById('doublePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'double_press', data: {} }));
document.getElementById('triplePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'triple_press', data: {} }));
document.getElementById('longPressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'long_press', data: {} }));
document.getElementById('clearEvents').addEventListener('click', () => {
while(eventFeedDiv.children.length > 1) eventFeedDiv.removeChild(eventFeedDiv.lastChild);
addEventToLog('🧹 Лог очищен');
});
volumeSlider.addEventListener('input', (e) => {
const val = parseFloat(e.target.value);
volumeValueSpan.innerText = val.toFixed(2);
currentVolume = val;
sendCommand('set_volume', { level: val });
});
// автоподключение при загрузке (опционально)
window.addEventListener('load', () => {
addEventToLog('🤖 Интерфейс LVA NEXUS • готов к подключению');
// Инициализация RMS элементов после загрузки DOM
const rmsFillEl = document.getElementById('rmsFill');
const rmsValueEl = document.getElementById('rmsValue');
if (rmsFillEl && rmsValueEl) {
console.log('RMS meter initialized');
}
});
</script>
</body>
</html>
web-client/html/index.html
+128
View File
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>NOVA Voice Assistant</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="app-container">
<!-- Верхняя панель -->
<header class="app-header">
<div class="logo">
<span class="logo-icon">🎙️</span>
<span class="logo-text">NOVA Assistant</span>
</div>
<div class="connection-status">
<div class="led" id="statusLed"></div>
<span class="status-text" id="statusLabel">disconnected</span>
<button id="connectBtn" class="btn-outline">⟳ Connect</button>
</div>
</header>
<!-- Блок настроек WebSocket -->
<div class="settings-card glass">
<div class="settings-row">
<input type="text" id="wsUrlInput" value="ws://192.168.200.111:8675" placeholder="ws://ip:port" class="input-url">
<button id="connectBtnCard" class="btn-primary">Connect</button>
<label class="auto-connect">
<input type="checkbox" id="autoConnect" checked> Auto-connect
</label>
</div>
</div>
<!-- Основная сетка -->
<div class="dashboard">
<!-- Левая колонка: голосовой аватар -->
<div class="card voice-card glass">
<div class="card-header">
<span class="header-icon">🎤</span>
<h3>Voice Core</h3>
</div>
<div class="avatar-container">
<div class="orb" id="orbCore">
<div class="orb-pulse"></div>
<div class="orb-inner">🎙️</div>
</div>
<div class="state-badge" id="stateText">Idle</div>
</div>
<!-- Визуализатор аудио (волны) -->
<div class="viz-wrapper">
<canvas id="audioCanvas" width="500" height="80"></canvas>
</div>
<!-- RMS-метр -->
<div class="rms-container">
<div class="rms-label">RMS Level</div>
<div class="rms-bar">
<div class="rms-fill" id="rmsFill"></div>
</div>
<div class="rms-value" id="rmsValue">0.00</div>
</div>
<!-- Регулировка громкости -->
<div class="volume-control">
<span>🔊 Volume</span>
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
<span id="volumeValue" class="volume-percent">80%</span>
</div>
<div class="button-group">
<button id="muteBtn" class="btn-secondary">🔇 Mute</button>
<button id="unmuteBtn" class="btn-secondary">🎤 Unmute</button>
</div>
</div>
<!-- Центр: команды и транскрипция -->
<div class="card commands-card glass">
<div class="card-header">
<span class="header-icon">🕹️</span>
<h3>Commands & Transcripts</h3>
</div>
<div class="button-group">
<button id="startListeningBtn" class="btn-primary">🎧 Start Listen</button>
<button id="stopPipelineBtn" class="btn-danger">⏹️ Stop Pipeline</button>
<button id="stopTimerBtn" class="btn-secondary">⏲️ Stop Timer</button>
</div>
<div class="button-group">
<button id="volUpBtn" class="btn-secondary">➕ Vol+</button>
<button id="volDownBtn" class="btn-secondary">➖ Vol-</button>
<button id="requestRmsBtn" class="btn-secondary">📊 Request RMS</button>
</div>
<div class="button-group">
<button id="singlePressBtn" class="btn-outline">Single</button>
<button id="doublePressBtn" class="btn-outline">Double</button>
<button id="triplePressBtn" class="btn-outline">Triple</button>
<button id="longPressBtn" class="btn-outline">Long</button>
</div>
<div class="transcript-area">
<div class="transcript-item">
<div class="transcript-label">You said:</div>
<div id="lastStt" class="transcript-text">—</div>
</div>
<div class="transcript-item">
<div class="transcript-label">Assistant said:</div>
<div id="lastTts" class="transcript-text">—</div>
</div>
</div>
</div>
<!-- Правая колонка: телеметрия и логи -->
<div class="card telemetry-card glass">
<div class="card-header">
<span class="header-icon">📡</span>
<h3>Telemetry & Events</h3>
</div>
<div class="status-grid">
<div class="status-chip"><span>🔇 Muted:</span> <strong id="mutedStatus">—</strong></div>
<div class="status-chip"><span>🏠 HA:</span> <strong id="haStatus">—</strong></div>
<div class="status-chip"><span>🎚️ Vol:</span> <strong id="liveVol">—</strong></div>
</div>
<div class="event-feed" id="eventFeed">
<div class="event-item">⬤ Ready to connect...</div>
</div>
<button id="clearEvents" class="btn-secondary full-width">Clear log</button>
</div>
</div>
</div>
</body>
</html>
web-client/html/script.js
+255
View File
@@ -0,0 +1,255 @@
// ------------------ WebSocket & State ------------------
let ws = null;
let isConnected = false;
let currentVolume = 0.8;
let mutedState = false;
let haConnected = false;
let rmsTimeout = null;
let currentRms = 0;
const canvas = document.getElementById('audioCanvas');
const ctx = canvas.getContext('2d');
let canvasWidth = canvas.parentElement.clientWidth - 24;
let canvasHeight = 80;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// DOM elements
const statusLed = document.getElementById('statusLed');
const statusLabel = document.getElementById('statusLabel');
const connectBtn = document.getElementById('connectBtn');
const orbCore = document.getElementById('orbCore');
const stateText = document.getElementById('stateText');
const volumeSlider = document.getElementById('volumeSlider');
const volumeValueSpan = document.getElementById('volumeValue');
const lastSttSpan = document.getElementById('lastStt');
const lastTtsSpan = document.getElementById('lastTts');
const mutedStatusSpan = document.getElementById('mutedStatus');
const haStatusSpan = document.getElementById('haStatus');
const liveVolSpan = document.getElementById('liveVol');
const eventFeedDiv = document.getElementById('eventFeed');
const rmsFill = document.getElementById('rmsFill');
const rmsValueSpan = document.getElementById('rmsValue');
function addEventToLog(message) {
const time = new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
const div = document.createElement('div');
div.className = 'event-item';
div.innerHTML = `<span style="color:#4effb5;">${time}</span> • ${message}`;
eventFeedDiv.prepend(div);
if (eventFeedDiv.children.length > 50) eventFeedDiv.removeChild(eventFeedDiv.lastChild);
}
function updateRmsMeter(level) {
if (!rmsFill || !rmsValueSpan) return;
const percent = Math.min(100, Math.max(0, level * 100));
rmsFill.style.width = percent + '%';
rmsValueSpan.textContent = level.toFixed(2);
clearTimeout(rmsTimeout);
rmsTimeout = setTimeout(() => {
if (rmsFill) rmsFill.style.width = '0%';
if (rmsValueSpan) rmsValueSpan.textContent = '0.00';
}, 1000);
}
function sendCommand(command, payload = {}) {
if (!ws || ws.readyState !== WebSocket.OPEN) {
addEventToLog(`❌ Cannot send: ${command} — not connected`);
return;
}
const msg = JSON.stringify({ command, data: payload });
ws.send(msg);
addEventToLog(`📤 Command: ${command}`);
}
function handleIncomingMessage(ev) {
try {
const json = JSON.parse(ev.data);
const eventType = json.type || json.event;
if (eventType === 'audio-level' && json.data?.level !== undefined) {
currentRms = json.data.level;
updateRmsMeter(currentRms);
} else if (eventType === 'voice-started') {
stateText.innerText = 'Listening...';
document.body.classList.add('listening-active');
addEventToLog('🎤 Voice detected');
} else if (eventType === 'voice-stopped') {
stateText.innerText = 'Processing';
document.body.classList.remove('listening-active');
addEventToLog('💭 Processing speech');
} else if (eventType === 'transcript' && json.data?.text) {
lastSttSpan.innerText = json.data.text;
addEventToLog(`🎤 "${json.data.text}"`);
} else if (eventType === 'synthesize' && json.data?.text) {
lastTtsSpan.innerText = json.data.text;
} else if (eventType === 'audio-start') {
stateText.innerText = 'Speaking';
addEventToLog('🗣️ Assistant speaking');
} else if (eventType === 'audio-stop' || eventType === 'played') {
if (stateText.innerText === 'Speaking') stateText.innerText = 'Idle';
addEventToLog('🔇 TTS finished');
} else if (eventType === 'timer-started') {
addEventToLog('⏱️ Timer started');
} else if (eventType === 'timer-finished') {
addEventToLog('⏰ Timer triggered!');
stateText.innerText = 'Timer';
} else if (eventType === 'satellite-connected') {
haConnected = true;
haStatusSpan.innerText = 'connected';
addEventToLog('🔌 Satellite connected');
} else if (eventType === 'satellite-disconnected') {
haConnected = false;
haStatusSpan.innerText = 'offline';
addEventToLog('🔌 Satellite disconnected');
} else if (eventType === 'error') {
addEventToLog(`❌ Error: ${json.data?.message || 'unknown'}`);
} else {
addEventToLog(`📡 Event: ${eventType}`);
}
if (json.data) {
if (json.data.volume !== undefined) {
currentVolume = json.data.volume;
volumeSlider.value = currentVolume;
volumeValueSpan.innerText = Math.round(currentVolume * 100) + '%';
liveVolSpan.innerText = Math.round(currentVolume * 100) + '%';
}
if (json.data.muted !== undefined) {
mutedState = json.data.muted;
mutedStatusSpan.innerText = mutedState ? 'muted' : 'unmuted';
}
}
} catch (e) {
console.warn(e);
addEventToLog(`⚠️ Parse error: ${e.message}`);
}
}
// Визуализация аудио (волны)
let rmsSmoothed = 0;
function drawVisualization() {
requestAnimationFrame(drawVisualization);
if (!isConnected) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#0a1222';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#0ff3';
ctx.font = '10px monospace';
ctx.fillText('⚡ idle', canvas.width - 50, 20);
return;
}
let avg = 10 + (currentRms / 0.15) * 90;
avg = Math.min(100, Math.max(10, avg));
rmsSmoothed = rmsSmoothed * 0.7 + avg * 0.3;
avg = rmsSmoothed;
if (currentRms < 0.001) avg = 10 + Math.random() * 5;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#07121f';
ctx.fillRect(0, 0, canvas.width, canvas.height);
const barWidth = canvas.width / 42;
for (let i = 0; i < 42; i++) {
let barHeight = (avg * (Math.sin(i * 0.5) + 1) / 2 + 5) * (0.5 + Math.random() * 0.3);
if (stateText.innerText === 'Speaking') barHeight = avg * 1.6 * (Math.sin(i * 0.3) + 1.2);
barHeight = Math.min(barHeight, canvas.height - 10);
const x = i * (barWidth + 2);
const grad = ctx.createLinearGradient(x, canvas.height - barHeight, x, canvas.height);
grad.addColorStop(0, '#0ff');
grad.addColorStop(1, '#a3f');
ctx.fillStyle = grad;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
}
}
drawVisualization();
// WebSocket подключение
function toggleConnection() {
const url = document.getElementById('wsUrlInput').value.trim();
if (!url) {
addEventToLog('❌ Enter WebSocket URL');
return;
}
if (ws && ws.readyState === WebSocket.OPEN) {
ws.close();
return;
}
ws = new WebSocket(url);
ws.onopen = () => {
isConnected = true;
statusLed.classList.add('connected');
statusLabel.innerText = 'connected';
addEventToLog(`✅ Connected to ${url}`);
stateText.innerText = 'Online';
document.getElementById('connectBtn').innerHTML = '🔌 Disconnect';
document.getElementById('connectBtnCard').innerHTML = 'Disconnect';
};
ws.onmessage = handleIncomingMessage;
ws.onerror = () => addEventToLog(`⚠️ WebSocket error`);
ws.onclose = () => {
isConnected = false;
statusLed.classList.remove('connected');
statusLabel.innerText = 'disconnected';
addEventToLog(`🔌 Disconnected`);
stateText.innerText = 'Offline';
document.body.classList.remove('listening-active');
document.getElementById('connectBtn').innerHTML = '⟳ Connect';
document.getElementById('connectBtnCard').innerHTML = 'Connect';
};
}
// Обработчики кнопок
document.getElementById('connectBtn').addEventListener('click', toggleConnection);
document.getElementById('connectBtnCard').addEventListener('click', toggleConnection);
window.addEventListener('load', () => {
addEventToLog('🤖 Nova Assistant ready');
if (document.getElementById('autoConnect').checked) {
setTimeout(() => toggleConnection(), 500);
}
// Адаптация canvas при изменении размера
window.addEventListener('resize', () => {
canvas.width = canvas.parentElement.clientWidth - 24;
canvas.height = 80;
});
});
// Команды
document.getElementById('startListeningBtn').addEventListener('click', () => sendCommand('set_volume', { level: 1.0 }));
document.getElementById('stopPipelineBtn').addEventListener('click', () => sendCommand('mute', {}));
document.getElementById('stopTimerBtn').addEventListener('click', () => sendCommand('unmute', {}));
document.getElementById('muteBtn').addEventListener('click', () => sendCommand('mute', {}));
document.getElementById('unmuteBtn').addEventListener('click', () => sendCommand('unmute', {}));
document.getElementById('volUpBtn').addEventListener('click', () => {
let newVol = Math.min(1.0, currentVolume + 0.1);
currentVolume = newVol;
sendCommand('set_volume', { level: newVol });
volumeSlider.value = newVol;
volumeValueSpan.innerText = Math.round(newVol * 100) + '%';
});
document.getElementById('volDownBtn').addEventListener('click', () => {
let newVol = Math.max(0.0, currentVolume - 0.1);
currentVolume = newVol;
sendCommand('set_volume', { level: newVol });
volumeSlider.value = newVol;
volumeValueSpan.innerText = Math.round(newVol * 100) + '%';
});
document.getElementById('requestRmsBtn').addEventListener('click', () => {
sendCommand('trigger_event', { event_type: 'request_audio_level', data: {} });
addEventToLog('📊 Requested RMS update');
});
document.getElementById('singlePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'single_press', data: {} }));
document.getElementById('doublePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'double_press', data: {} }));
document.getElementById('triplePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'triple_press', data: {} }));
document.getElementById('longPressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'long_press', data: {} }));
document.getElementById('clearEvents').addEventListener('click', () => {
while (eventFeedDiv.children.length > 1) eventFeedDiv.removeChild(eventFeedDiv.lastChild);
addEventToLog('🧹 Log cleared');
});
volumeSlider.addEventListener('input', (e) => {
let val = parseFloat(e.target.value);
currentVolume = val;
volumeValueSpan.innerText = Math.round(val * 100) + '%';
sendCommand('set_volume', { level: val });
});
web-client/html/styles.css
+456
View File
@@ -0,0 +1,456 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background: radial-gradient(circle at 10% 20%, #0b1120, #04070c);
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Poppins', sans-serif;
min-height: 100vh;
padding: 24px;
color: #eef5ff;
}
.app-container {
max-width: 1400px;
margin: 0 auto;
}
/* Glassmorphism */
.glass {
background: rgba(15, 25, 45, 0.55);
backdrop-filter: blur(16px);
border-radius: 32px;
border: 1px solid rgba(0, 255, 255, 0.15);
box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.4);
transition: all 0.2s ease;
}
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, #a0f0ff, #6c63ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.logo-icon {
font-size: 2rem;
filter: drop-shadow(0 0 6px cyan);
}
.logo-text {
letter-spacing: 1px;
}
.connection-status {
display: flex;
align-items: center;
gap: 16px;
background: rgba(0, 0, 0, 0.3);
padding: 8px 20px;
border-radius: 60px;
}
.led {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff4d4d;
box-shadow: 0 0 6px #ff4d4d;
transition: 0.2s;
}
.led.connected {
background: #0ff;
box-shadow: 0 0 12px #0ff;
}
.status-text {
font-weight: 500;
font-family: monospace;
font-size: 0.9rem;
}
.settings-card {
padding: 16px 24px;
margin-bottom: 28px;
}
.settings-row {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.input-url {
flex: 1;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 255, 255, 0.3);
border-radius: 40px;
padding: 10px 18px;
color: #eef5ff;
font-size: 0.9rem;
outline: none;
transition: 0.2s;
}
.input-url:focus {
border-color: cyan;
box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}
.auto-connect {
display: flex;
align-items: center;
gap: 8px;
color: #aaa;
font-size: 0.85rem;
cursor: pointer;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1.1fr 0.9fr;
gap: 24px;
}
.card {
padding: 24px;
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.5);
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
border-left: 3px solid #0ff;
padding-left: 14px;
}
.card-header h3 {
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 0.5px;
color: #bfd9ff;
}
.header-icon {
font-size: 1.3rem;
}
/* Голосовая сфера */
.avatar-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
}
.orb {
position: relative;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.orb-inner {
width: 130px;
height: 130px;
background: radial-gradient(circle at 35% 35%, #1ad, #0a4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
box-shadow: 0 0 30px rgba(0, 255, 200, 0.4);
transition: all 0.2s ease;
z-index: 2;
}
.orb-pulse {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(0, 255, 200, 0.2);
animation: pulse-ring 2s infinite;
z-index: 1;
}
@keyframes pulse-ring {
0% { transform: scale(0.9); opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Активное слушание */
.listening-active .orb-inner {
animation: listen-pulse 0.8s infinite alternate;
box-shadow: 0 0 50px cyan;
}
@keyframes listen-pulse {
0% { transform: scale(1); background: radial-gradient(circle at 35% 35%, #1ad, #0a4); }
100% { transform: scale(1.05); background: radial-gradient(circle at 35% 35%, #3ff, #2c9); }
}
.state-badge {
background: rgba(0, 255, 255, 0.15);
backdrop-filter: blur(4px);
padding: 6px 18px;
border-radius: 40px;
font-weight: 600;
font-size: 0.9rem;
}
/* Визуализатор */
.viz-wrapper {
background: rgba(0, 0, 0, 0.3);
border-radius: 24px;
padding: 12px;
margin: 15px 0;
}
canvas {
width: 100%;
height: 80px;
display: block;
border-radius: 16px;
}
/* RMS meter */
.rms-container {
margin: 16px 0;
}
.rms-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #8aa;
margin-bottom: 6px;
}
.rms-bar {
height: 6px;
background: #1e2a3a;
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.rms-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #0ff, #f0f);
border-radius: 3px;
transition: width 0.08s linear;
}
.rms-value {
font-family: monospace;
font-size: 0.8rem;
text-align: right;
color: cyan;
}
.volume-control {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 12px;
}
.volume-control span:first-child {
font-size: 0.9rem;
}
.volume-control input {
flex: 1;
height: 4px;
-webkit-appearance: none;
appearance: none; /* стандартное свойство для совместимости */
background: #2a3a4a;
border-radius: 2px;
outline: none;
}
.volume-control input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: cyan;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 6px cyan;
}
.volume-percent {
width: 45px;
text-align: right;
font-family: monospace;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 16px 0 8px;
}
.btn-primary, .btn-secondary, .btn-danger, .btn-outline {
padding: 8px 18px;
border-radius: 40px;
font-weight: 500;
font-size: 0.8rem;
cursor: pointer;
transition: 0.15s;
border: none;
background: rgba(20, 30, 50, 0.7);
backdrop-filter: blur(4px);
color: #eef5ff;
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.5px;
border: 1px solid rgba(0, 255, 255, 0.3);
}
.btn-primary {
background: rgba(0, 200, 255, 0.2);
border-color: #0ff;
}
.btn-primary:hover {
background: rgba(0, 200, 255, 0.4);
box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
transform: translateY(-2px);
}
.btn-secondary:hover {
background: rgba(100, 100, 200, 0.3);
border-color: #8af;
transform: translateY(-2px);
}
.btn-danger {
border-color: #ff66aa;
}
.btn-danger:hover {
background: #ff336620;
border-color: #ff88cc;
}
.btn-outline {
background: transparent;
border-color: #6c7a8a;
}
.btn-outline:hover {
border-color: cyan;
background: rgba(0, 255, 255, 0.1);
}
.full-width {
width: 100%;
justify-content: center;
margin-top: 12px;
}
.transcript-area {
background: rgba(0, 0, 0, 0.3);
border-radius: 24px;
padding: 16px;
margin-top: 18px;
}
.transcript-item {
margin-bottom: 14px;
}
.transcript-label {
font-size: 0.7rem;
text-transform: uppercase;
color: #8ad;
margin-bottom: 6px;
}
.transcript-text {
font-style: italic;
color: #f0f9ff;
word-break: break-word;
font-size: 0.9rem;
}
.status-grid {
display: flex;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.status-chip {
background: rgba(0, 0, 0, 0.3);
padding: 6px 14px;
border-radius: 40px;
font-size: 0.8rem;
}
.event-feed {
background: rgba(0, 0, 0, 0.25);
border-radius: 20px;
height: 220px;
overflow-y: auto;
padding: 10px;
font-family: monospace;
font-size: 0.75rem;
}
.event-item {
padding: 8px 0;
border-bottom: 1px solid #2a4c6e50;
color: #bde;
}
@media (max-width: 1000px) {
.dashboard {
grid-template-columns: 1fr;
gap: 20px;
}
body {
padding: 16px;
}
.orb {
width: 120px;
height: 120px;
}
.orb-inner {
width: 100px;
height: 100px;
font-size: 2.5rem;
}
}
wyoming_satellite/satellite.py
+105 -14
View File
@@ -113,7 +113,8 @@ class SatelliteBase:
self._unmute_microphone_task: Optional[asyncio.Task] = None
# Runtime настройки (изменяемые через WebSocket команды)
self._runtime_volume: float = 1.0
self._runtime_mic_volume: float = 1.0 # Громкость микрофона
self._runtime_snd_volume: float = 1.0 # Громкость воспроизведения
self._runtime_led_brightness: int = 128
# WebSocket server
@@ -125,6 +126,11 @@ class SatelliteBase:
self._last_mic_level: float = 0.0
self._audio_level_task: Optional[asyncio.Task] = None
# Audio recording
self._is_recording: bool = False
self._recording_buffer: List[bytes] = []
self._recording_start_time: Optional[float] = None
# Debug audio recording
self.wake_audio_writer: Optional[DebugAudioWriter] = None
self.stt_audio_writer: Optional[DebugAudioWriter] = None
@@ -591,9 +597,9 @@ class SatelliteBase:
audio_bytes, self.settings.mic.volume_multiplier
)
# Применить runtime громкость (из WebSocket команд)
if self._runtime_volume != 1.0:
audio_bytes = multiply_volume(audio_bytes, self._runtime_volume)
# Применить runtime громкость микрофона (из WebSocket команд)
if self._runtime_mic_volume != 1.0:
audio_bytes = multiply_volume(audio_bytes, self._runtime_mic_volume)
if self._mic_webrtc is not None:
# Noise suppression and auto gain
@@ -653,9 +659,13 @@ class SatelliteBase:
_LOGGER.debug("Connected to snd service")
# Audio processing
if self.settings.snd.needs_processing and AudioChunk.is_type(
event.type
):
# Проверяем нужна ли обработка: базовый volume_multiplier или runtime громкость
needs_processing = (
self.settings.snd.needs_processing # volume_multiplier != 1.0
or self._runtime_snd_volume != 1.0 # WebSocket громкость
)
if needs_processing and AudioChunk.is_type(event.type):
chunk = AudioChunk.from_event(event)
audio_bytes = self._process_snd_audio(chunk.audio)
event = AudioChunk(
@@ -693,6 +703,11 @@ class SatelliteBase:
audio_bytes, self.settings.snd.volume_multiplier
)
# Применить runtime громкость воспроизведения (из WebSocket команд)
if self._runtime_snd_volume != 1.0:
_LOGGER.debug(f"Applying runtime volume: {self._runtime_snd_volume}")
audio_bytes = multiply_volume(audio_bytes, self._runtime_snd_volume)
return audio_bytes
async def _play_wav(
@@ -1149,7 +1164,8 @@ class SatelliteBase:
Обработать команду от WebSocket клиента.
Поддерживаемые команды:
- set_volume: Изменить громкость
- set_volume: Изменить громкость воспроизведения (TTS, звуки)
- set_mic_volume: Изменить чувствительность микрофона
- mute: Заглушить микрофон
- unmute: Включить микрофон
- play_sound: Воспроизвести WAV файл
@@ -1158,12 +1174,19 @@ class SatelliteBase:
"""
try:
if command == "set_volume":
# Изменить громкость (0.0 - 1.0)
# Изменить громкость воспроизведения (0.0 - 1.0)
# Поддерживаем оба названия: "level" и "volume" (для обратной совместимости)
level = float(data.get("level") or data.get("volume", 1.0))
level = max(0.0, min(1.0, level)) # Clamp 0-1
self._runtime_volume = level
_LOGGER.info(f"Setting volume to {level}")
self._runtime_snd_volume = level
_LOGGER.info(f"Setting playback volume to {level}")
elif command == "set_mic_volume":
# Изменить чувствительность микрофона (0.0 - 2.0)
level = float(data.get("level") or data.get("volume", 1.0))
level = max(0.0, min(2.0, level)) # Clamp 0-2
self._runtime_mic_volume = level
_LOGGER.info(f"Setting microphone sensitivity to {level}")
elif command == "mute":
_LOGGER.info("Muting microphone")
@@ -1189,6 +1212,42 @@ class SatelliteBase:
self._runtime_led_brightness = brightness
_LOGGER.info(f"Setting LED brightness to {brightness}")
elif command == "start_recording":
# Начать запись аудио с микрофона
_LOGGER.info("Starting audio recording")
self._is_recording = True
self._recording_buffer = []
self._recording_start_time = time.time()
elif command == "stop_recording":
# Остановить запись и вернуть WAV файл
if not self._is_recording:
_LOGGER.warning("Recording not started")
return
_LOGGER.info("Stopping audio recording")
self._is_recording = False
# Создать WAV файл из буфера
duration = time.time() - (self._recording_start_time or 0)
wav_data = await self._create_wav_from_buffer()
# Отправить событие с данными записи
import base64
recording_event = Event(
type="recording-ready",
data={
"duration": duration,
"size": len(wav_data),
"data": base64.b64encode(wav_data).decode('utf-8')
}
)
await self._broadcast_to_websocket(recording_event)
# Очистить буфер
self._recording_buffer = []
_LOGGER.info(f"Recording saved: {duration:.1f}s, {len(wav_data)} bytes")
elif command == "trigger_event":
# Отправить событие в Home Assistant
event_type = data.get("event_type")
@@ -1196,9 +1255,8 @@ class SatelliteBase:
if event_type:
_LOGGER.info(f"Triggering event: {event_type}")
# Отправить событие в server
from wyoming.event import Event
event = Event(type=event_type, data=event_data)
await self.event_to_server(event)
trigger_event = Event(type=event_type, data=event_data)
await self.event_to_server(trigger_event)
else:
_LOGGER.warning("trigger_event missing 'event_type'")
@@ -1250,6 +1308,35 @@ class SatelliteBase:
if self._last_mic_level > 0.05:
_LOGGER.debug(f"Audio level: {self._last_mic_level:.2f}")
# -------------------------------------------------------------------------
# Audio Recording
# -------------------------------------------------------------------------
async def _create_wav_from_buffer(self) -> bytes:
"""
Создать WAV файл из буфера записи.
Returns:
bytes: WAV файл в виде байтов
"""
import io
if not self._recording_buffer:
return b''
# Объединить все чанки
audio_data = b''.join(self._recording_buffer)
# Создать WAV файл в памяти
wav_buffer = io.BytesIO()
with wave.open(wav_buffer, 'wb') as wav_file:
wav_file.setnchannels(self.settings.mic.channels)
wav_file.setsampwidth(self.settings.mic.width)
wav_file.setframerate(self.settings.mic.rate)
wav_file.writeframes(audio_data)
return wav_buffer.getvalue()
# -------------------------------------------------------------------------
# Info
# -------------------------------------------------------------------------
@@ -1619,6 +1706,10 @@ class WakeStreamingSatellite(SatelliteBase):
self._last_mic_level = self._calculate_rms(audio_bytes)
# Сохранить в буфер записи (если запись активна)
if self._is_recording:
self._recording_buffer.append(audio_bytes)
# Debug audio recording
if (self.wake_audio_writer is not None) or (self.stt_audio_writer is not None):
if self.wake_audio_writer is not None: