🎙️ Голосовой помощник в браузере: распознаём команду и отвечаем — часть 1
🎙️ Голосовой помощник в браузере: распознаём команду и отвечаем — часть 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 Какой следующий шаг интереснее: А — запуск команд ПК, Б — подключение локальной модели или В — память диалога? Напишите в комментариях. #первыйхаб #технологии #искусственныйинтеллект #разработка #голосовойпомощник