🎙️ Голосовой помощник в браузере: распознаём команду и отвечаем — часть 1

Соберём небольшой прототип: браузер услышит фразу, найдёт совпадение в наших правилах и произнесёт ответ. Пока это не языковая модель, а понятный первый слой будущего ИИ-помощника: микрофон → распознанный текст → логика → голос.

1) Создайте файл index.html и вставьте код:

<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Голосовой помощник</title>
<button id="start">🎙️ Сказать команду</button>
<p id="status">Нажмите кнопку и произнесите: «привет» или «помощь».</p>
<script>
const status = document.querySelector("#status");
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
function answer(text) {
const q = text.toLowerCase();
if (q.includes("привет")) return "Привет! Я слушаю.";
if (q.includes("помощь")) return "Пока я умею здороваться и показывать эту подсказку.";
return "Пока не знаю эту команду. Скажите «помощь».";
}
if (!SpeechRecognition) {
status.textContent = "В этом браузере распознавание речи не поддерживается.";
} else {
const recognition = new SpeechRecognition();
recognition.lang = "ru-RU";
recognition.continuous = false;
recognition.interimResults = false;
recognition.onstart = () => status.textContent = "Слушаю…";
recognition.onresult = event => {
const heard = event.results[0][0].transcript;
const reply = answer(heard);
status.textContent = `Вы сказали: «${heard}». Ответ: ${reply}`;
const speech = new SpeechSynthesisUtterance(reply);
speech.lang = "ru-RU";
window.speechSynthesis.speak(speech);
};
recognition.onerror = event => status.textContent = `Ошибка распознавания: ${event.error}`;
document.querySelector("#start").onclick = () => recognition.start();
}
</script>
</html>

2) Откройте папку с файлом в терминале и запустите локальный сервер: `python -m http.server 8000` (в Windows можно попробовать `py -m http.server 8000`). Перейдите на `http://localhost:8000`.
3) Нажмите кнопку и разрешите сайту доступ к микрофону. Проверьте команды «привет» и «помощь».
4) Если видите сообщение о неподдерживаемом распознавании, попробуйте актуальную версию Chrome или Edge. Поддержка `SpeechRecognition` ограничена и отличается между браузерами; синтез речи поддерживается шире. Распознавание может использовать внешний сервис браузера, поэтому не произносите конфиденциальные данные.

В следующей части добавим список команд и историю диалога. Документация: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

Какой следующий шаг интереснее: А — запуск команд ПК, Б — подключение локальной модели или В — память диалога? Напишите в комментариях.

#первыйхаб #технологии #искусственныйинтеллект #разработка #голосовойпомощник