284 lines
10 KiB
HTML
284 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Say — Голосовой ассистент | Nubes</title>
|
|
<link rel="icon" href="/favicon.png" type="image/png">
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ================================================================== -->
|
|
<!-- Header — точь-в-точь как в ipwhitelist-app -->
|
|
<!-- ================================================================== -->
|
|
<header class="topbar">
|
|
<div class="topbar-inner">
|
|
<a href="/" class="topbar-logo" title="Say — Главная">
|
|
<img src="/nubes-logo.svg" alt="Nubes" width="130" height="28">
|
|
</a>
|
|
<span class="topbar-sep">|</span>
|
|
<span class="topbar-title">Say — Голосовой ассистент</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ================================================================== -->
|
|
<!-- Контент -->
|
|
<!-- ================================================================== -->
|
|
<div class="page">
|
|
|
|
<!-- Карточка: три LLM на выбор -->
|
|
<div class="card">
|
|
<div class="card-header">🤖 Выберите модель — нажмите и говорите</div>
|
|
<div class="card-body" id="llmCards">
|
|
<!-- Заполняется JS после загрузки профилей с /api/profiles -->
|
|
<div class="loading">Загрузка моделей...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Карточка: результат -->
|
|
<div class="card" id="resultCard" style="display:none">
|
|
<div class="card-header">📋 Результат</div>
|
|
<div class="card-body">
|
|
<div class="result-section">
|
|
<div class="result-label">📝 Распознано (Whisper)</div>
|
|
<div class="result-text" id="transcriptionText"></div>
|
|
</div>
|
|
<div class="result-section">
|
|
<div class="result-label" id="responseLabel">🤖 Ответ LLM</div>
|
|
<div class="result-text" id="responseText"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ошибка -->
|
|
<div class="alert alert-error" id="errorBox" style="display:none"></div>
|
|
|
|
</div>
|
|
|
|
<!-- ================================================================== -->
|
|
<!-- Footer -->
|
|
<!-- ================================================================== -->
|
|
<div class="footer">Say v1.0.0 · Whisper + LLM · Nubes</div>
|
|
|
|
<!-- ================================================================== -->
|
|
<!-- JavaScript -->
|
|
<!-- ================================================================== -->
|
|
<script>
|
|
// ===========================================================================
|
|
// DOM-элементы
|
|
// ===========================================================================
|
|
const llmCards = document.getElementById('llmCards');
|
|
const resultCard = document.getElementById('resultCard');
|
|
const transEl = document.getElementById('transcriptionText');
|
|
const respEl = document.getElementById('responseText');
|
|
const respLabel = document.getElementById('responseLabel');
|
|
const errorBox = document.getElementById('errorBox');
|
|
|
|
// ===========================================================================
|
|
// Состояние записи (одна активная кнопка в моменте)
|
|
// ===========================================================================
|
|
let activeStream = null; // MediaStream
|
|
let activeRecorder = null; // MediaRecorder
|
|
let activeBtn = null; // DOM-кнопка
|
|
let audioChunks = [];
|
|
let activeLlmId = null;
|
|
|
|
// ===========================================================================
|
|
// Шаблон карточки LLM
|
|
// ===========================================================================
|
|
function buildLlmCard(profile) {
|
|
return `
|
|
<div class="llm-card" data-llm="${profile.id}">
|
|
<div class="llm-info">
|
|
<div class="llm-name">${escapeHtml(profile.name)}</div>
|
|
<div class="llm-desc">${escapeHtml(profile.description)}</div>
|
|
</div>
|
|
<button class="btn btn-primary record-btn" data-llm="${profile.id}">
|
|
<span class="btn-icon">🎤</span>
|
|
<span class="btn-label">Записать</span>
|
|
</button>
|
|
<span class="rec-status" data-llm="${profile.id}"></span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// ===========================================================================
|
|
// Загрузка профилей с сервера
|
|
// ===========================================================================
|
|
async function loadProfiles() {
|
|
try {
|
|
const resp = await fetch('/api/profiles');
|
|
if (!resp.ok) throw new Error('Ошибка загрузки профилей: ' + resp.status);
|
|
const profiles = await resp.json();
|
|
|
|
llmCards.innerHTML = profiles.map(buildLlmCard).join('');
|
|
|
|
// Вешаем обработчики на все кнопки записи
|
|
document.querySelectorAll('.record-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var llmId = btn.dataset.llm;
|
|
if (activeRecorder && activeRecorder.state === 'recording') {
|
|
stopRecording(); // повторное нажатие = стоп
|
|
} else {
|
|
startRecording(llmId, btn);
|
|
}
|
|
});
|
|
});
|
|
} catch (err) {
|
|
llmCards.innerHTML = '<div class="alert alert-error">' + escapeHtml(err.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
// ===========================================================================
|
|
// Старт записи
|
|
// ===========================================================================
|
|
async function startRecording(llmId, btn) {
|
|
// Сбрасываем предыдущий результат/ошибку
|
|
resultCard.style.display = 'none';
|
|
errorBox.style.display = 'none';
|
|
|
|
// Если уже идёт запись на другой кнопке — стоп
|
|
if (activeRecorder && activeRecorder.state === 'recording') {
|
|
stopRecording();
|
|
}
|
|
|
|
try {
|
|
activeStream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
} catch (err) {
|
|
showError('Нет доступа к микрофону. Разрешите запись в браузере.');
|
|
return;
|
|
}
|
|
|
|
var mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
|
|
? 'audio/webm;codecs=opus'
|
|
: 'audio/webm';
|
|
|
|
activeRecorder = new MediaRecorder(activeStream, { mimeType: mimeType });
|
|
audioChunks = [];
|
|
activeLlmId = llmId;
|
|
activeBtn = btn;
|
|
|
|
activeRecorder.ondataavailable = function(e) {
|
|
if (e.data.size > 0) audioChunks.push(e.data);
|
|
};
|
|
|
|
activeRecorder.onstop = function() { sendToServer(); };
|
|
|
|
activeRecorder.start();
|
|
|
|
// UI: кнопка → состояние «запись»
|
|
setButtonRecording(btn, true);
|
|
setAllButtonsDisabled(true, btn);
|
|
}
|
|
|
|
// ===========================================================================
|
|
// Стоп записи
|
|
// ===========================================================================
|
|
function stopRecording() {
|
|
if (activeRecorder && activeRecorder.state === 'recording') {
|
|
activeRecorder.stop();
|
|
}
|
|
if (activeStream) {
|
|
activeStream.getTracks().forEach(function(t) { t.stop(); });
|
|
activeStream = null;
|
|
}
|
|
// UI: кнопка → «обработка...»
|
|
if (activeBtn) {
|
|
setButtonProcessing(activeBtn);
|
|
}
|
|
}
|
|
|
|
// ===========================================================================
|
|
// Отправка аудио на сервер
|
|
// ===========================================================================
|
|
async function sendToServer() {
|
|
var blob = new Blob(audioChunks, { type: 'audio/webm' });
|
|
var formData = new FormData();
|
|
formData.append('audio', blob, 'recording.webm');
|
|
|
|
try {
|
|
var resp = await fetch('/api/speech/' + activeLlmId, {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
|
|
var data = await resp.json();
|
|
|
|
if (!resp.ok) {
|
|
throw new Error(data.error || 'Ошибка сервера (' + resp.status + ')');
|
|
}
|
|
|
|
// Успех — показываем результат
|
|
transEl.textContent = data.transcription;
|
|
respEl.textContent = data.response;
|
|
respLabel.textContent = '🤖 Ответ (' + data.llm.name + ')';
|
|
resultCard.style.display = '';
|
|
errorBox.style.display = 'none';
|
|
|
|
} catch (err) {
|
|
showError(err.message);
|
|
} finally {
|
|
resetButtons();
|
|
}
|
|
}
|
|
|
|
// ===========================================================================
|
|
// UI-хелперы
|
|
// ===========================================================================
|
|
function setButtonRecording(btn, rec) {
|
|
var icon = btn.querySelector('.btn-icon');
|
|
var label = btn.querySelector('.btn-label');
|
|
if (rec) {
|
|
icon.textContent = '⏺️';
|
|
label.textContent = 'Стоп';
|
|
btn.classList.add('recording');
|
|
}
|
|
}
|
|
|
|
function setButtonProcessing(btn) {
|
|
var icon = btn.querySelector('.btn-icon');
|
|
var label = btn.querySelector('.btn-label');
|
|
icon.textContent = '⏳';
|
|
label.textContent = 'Обработка...';
|
|
btn.disabled = true;
|
|
}
|
|
|
|
function setAllButtonsDisabled(dis, exceptBtn) {
|
|
document.querySelectorAll('.record-btn').forEach(function(b) {
|
|
if (b !== exceptBtn) b.disabled = dis;
|
|
});
|
|
}
|
|
|
|
function resetButtons() {
|
|
document.querySelectorAll('.record-btn').forEach(function(b) {
|
|
b.disabled = false;
|
|
b.classList.remove('recording');
|
|
b.querySelector('.btn-icon').textContent = '🎤';
|
|
b.querySelector('.btn-label').textContent = 'Записать';
|
|
});
|
|
activeBtn = null;
|
|
activeRecorder = null;
|
|
activeLlmId = null;
|
|
}
|
|
|
|
function showError(msg) {
|
|
errorBox.textContent = '❌ ' + msg;
|
|
errorBox.style.display = '';
|
|
resultCard.style.display = 'none';
|
|
}
|
|
|
|
// ===========================================================================
|
|
// Инициализация
|
|
// ===========================================================================
|
|
loadProfiles();
|
|
</script>
|
|
</body>
|
|
</html>
|