fix: структура под платформу — код в site/, requirements.txt в корне
This commit is contained in:
@@ -0,0 +1,283 @@
|
||||
<!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="/static/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ================================================================== -->
|
||||
<!-- Header — точь-в-точь как в ipwhitelist-app -->
|
||||
<!-- ================================================================== -->
|
||||
<header class="topbar">
|
||||
<div class="topbar-inner">
|
||||
<a href="/" class="topbar-logo" title="Say — Главная">
|
||||
<img src="/static/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>
|
||||
Reference in New Issue
Block a user