Простое голосовое управление системой

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Аватара пользователя
Alexander Znamensky
Сообщения: 160
Зарегистрирован: Ср дек 18, 2019 11:13 am
Откуда: Москва
Благодарил (а): 87 раз
Поблагодарили: 25 раз

Re: Простое голосовое управление системой

Сообщение Alexander Znamensky » Чт июл 16, 2020 4:47 pm

Divan писал(а):
Сб июн 06, 2020 12:32 am
Автор Smoke выложил еще один вариант управления голосом. Вариант интересный, но нет нормальной инструкции, что и как делать. Работает в браузере Хром и через https (нужен SSL сертификат). Плюсы: бесплатно, без ключей, быстро, не ограниченно в запросах, неограниченное время распознавания.
СпойлерПоказать
Так выглядит кнопка на сцене
СпойлерПоказать
кнопка.jpg

Выкладываю пошаговую инструкцию

Внимание!!! Если у вас уже установлен SSL сертификат и есть доступ по https, то пропускаем этот пункт

Создаем SSL сертификат (без этого не будет работать), пример создания SSL сертификата на Ubuntu
1) Ставим certbot
СпойлерПоказать
1) sudo apt-get update
2) sudo apt-get install software-properties-common
3) sudo add-apt-repository universe - если запустить эту команду, то получим ошибку add-apt-repository universe error: universe invalid, в таком
случае запускаем эту команду sudo add-apt-repository "deb http://archive.ubuntu.com/ubuntu $(lsb_release -sc) universe"
4) sudo add-apt-repository ppa:certbot/certbot
5) sudo apt-get update

Привязываем Font Awesome
1) Скачиваем Font Awesome
2) Распаковываем и переименовываем в font-awesome
3) Закидываем всю папку font-awesome например сюда www/var/templates_alt/font-awesome/css/font-awesome.min.css";
СпойлерПоказать
Путь к папке font awesome.jpg

Действия в сцене
В раздел Дополнительный код CSS вставляем код для импорта font-awesome

Код: Выделить всё

@import "/templates_alt/font-awesome/css/font-awesome.min.css";
СпойлерПоказать
Дополнительный код CSS.JPG
В раздел Код вставляем весь код.
СпойлерПоказать
раздел код.JPG

Код: Выделить всё

<script>
        // Создаем распознаватель
        var recognizer = new webkitSpeechRecognition();

        // Ставим опцию, чтобы распознавание началось ещё до того, как пользователь закончит говорить
        recognizer.interimResults = false;
        // Какой язык будем распознавать?
        recognizer.lang = 'ru-Ru';

        recognizer.onstart = function () {
            //После старта
            $('#voiceBtn').attr('style', 'position: fixed;z-index: 99;padding: 15px;border-radius: 50px;bottom: 0px;right: 0px;margin-right: 10px;background:lime;margin-bottom: 10px;animation: pulse;animation-iteration-count: infinite;animation-duration: 1s;');
            $('#voiceBtn').attr('class', 'bg-gradient-06-anim-fast');
        };

        recognizer.onerror = function (event) {
            //Если ошибка
        };

        // Используем колбек для обработки результатов
        recognizer.onresult = function (event) {
            var result = event.results[event.resultIndex];
            if (result.isFinal) {
                voiceStr = result[0].transcript.toLowerCase();
                //Вот тут ключевое слово маленькими буквами, если ключего слова нет - будет слать все подряд на сервер
                keyWords = voiceStr.indexOf('');
                if(keyWords != '-1') {
                    //Часть запросов будем отрабатывать прямо из JS
                    if(voiceStr.substring(keyWords).toLowerCase() == 'алиса включи музыку') {
                        startPlayMusic();
                    } else {
                        //AJAX на сервер
                        $.getJSON({
                            url: '/objects/?script=VoiceTest&voice='+encodeURI(voiceStr.substring(keyWords)),
                            success: function(responce) {
                                //Возврат от скрипта MJDM
                            },
                           error: function(responce) {
       						console.log('Ошибка отправки AJAX');
      						}
                        }); 
                    }
                }
            }
        };
        recognizer.onend = function () {
            //По окончании
            $('#voiceBtn').attr('style', 'position: fixed;z-index: 99;padding: 15px;border-radius: 50px;bottom: 0px;right: 0px;margin-right: 10px;background: purple; margin-bottom: 10px;');
            $('#voiceBtn').removeAttr('class');
            //Если сюда вписать recognizer.start(); будет слушать эфир вечно
        };
</script>
 

<div id="voiceBtn" style="position: fixed;z-index: 99;padding: 15px;border-radius: 50px;bottom: 0px;right: 0px;margin-right: 10px;background: purple;margin-bottom: 10px;" onclick="recognizer.start();">
  <i class="fa fa-microphone" style="font-size: 3rem;color: white;"></i>
</div>
Пояснение по коду

Здесь можно изменить ключевое слово (выделил где), но я убрал ключевое слово, нажали на кнопку и можно говорить.
СпойлерПоказать
ключевое слово.jpg
Здесь меняем цвет фона, тут устанавливается цвет фона при активации микрофона
СпойлерПоказать
изменить цвет фона.jpg
Здесь указываем имя скрипта (сценария). Сценарии создаете с любым именем и указываете в коде имя. У меня например так, где VoiceTest это имя сценария.

Код: Выделить всё

url: '/objects/?script=VoiceTest&voice='+encodeURI(voiceStr.substring(keyWords)),
СпойлерПоказать
Имя скрипта.jpg
Если в коде заменить адрес куда отправлять распознанный текст на:

Код: Выделить всё

url: '/command.php?qry='+encodeURI(voiceStr.substring(keyWords)),
СпойлерПоказать
строка скрипта.jpg
то сообщения будут прилетать в системную консоль (на главной странице).


Про ошибку AJAX
Когда вы все сделали и нажали на кнопку, а после всплыла такая ошибка, то не пугайтесь, это нормально, такая ошибка всплывает, если сценарий пустой, нужно добавить в код echo 'ok'; чтобы сценарии возвращал ответ.
СпойлерПоказать
ошибка AJAX.jpg
Пример сценария который будет записывать голос в свойство и в консоле можно увидеть текст
СпойлерПоказать
передача текста в свойство.JPG
Чтобы увидеть текст, нужно нажать на консоль
СпойлерПоказать
консоль.jpg
Создали к примеру сценарии VoiceTest
СпойлерПоказать
Сценарии VoiceTest.JPG
Вставляем код на примере блокли, где я создал переменную voice
СпойлерПоказать
Код в блокли.JPG
или код в PHP, кому как удобно

Код: Выделить всё

$voice = urldecode($_GET['voice']);


debMes($voice);
sg('VoiceMD.text',urldecode($_GET['voice']));
echo 'ok';


Уважаемый Divan, вы мне предложили обратиться к вам за помощью через форум.

Я пробовал получить SSL сертификат по вашему описанию через certbot (с оговоркой, что у меня Raspberry Pi4B+).
Соответственно, я выбрал Nginx и Debian 10 (buster).
Но несмотря на как-бы успешное получение сертификата, доступа по защищенному протоколу https нет....
СпойлерПоказать
Screenshot 2020-07-16 17.29.52.png
Screenshot 2020-07-16 17.29.52.png (191.21 КБ) 3718 просмотров
К сожалению, не силен в сетевых вопросах и застрял на этом шаге. Сможете что-то посоветовать?
Спасибо!
Raspberry Pi4 B+, образ v4_44 -> Alpha, PHP 7.3, Xiaomi Gateway 2, Tuya, Blynk, ESP8266
Аватара пользователя
Divan
Сообщения: 859
Зарегистрирован: Пн июл 08, 2019 5:04 pm
Благодарил (а): 117 раз
Поблагодарили: 280 раз

Re: Простое голосовое управление системой

Сообщение Divan » Чт июл 16, 2020 11:05 pm

Для теста голосового управления я ставил это на тестовую виртуальную машину с мажордом. Соответственно в certbot выбрал автоматический вариант установки с вариантом Apache с переключением на https. По скриншоту я вижу, что ключи вы получили. При получении ключей через cerbot, вы вероятно выбрали изменить конфигурацию вручную. Получить SSL сертификат это полдела, а после нужно править конфиг как здесь. Не важно какой модуль, главное, что способ получения ключей и настройки одинаковые.
За это сообщение автора Divan поблагодарил:
Alexander Znamensky (Ср июл 22, 2020 9:55 pm)
Рейтинг: 1.16%
Xpenology DSM 6.2.2 + Ubuntu Server 18.10 + Majordomo + MariaDB
Baur
Сообщения: 2
Зарегистрирован: Чт авг 13, 2020 6:21 pm
Благодарил (а): 0
Поблагодарили: 0

Re: Простое голосовое управление системой

Сообщение Baur » Чт авг 13, 2020 6:29 pm

Действия в сцене
В раздел Дополнительный код CSS вставляем код для импорта font-awesome

Код: Выделить всё

@import "/templates_alt/font-awesome/css/font-awesome.min.css";
Приветствую, я новичок. делаю все по инструкции. Застрял на дополнительном коде. Куда его вставлять? укажите пожалуйста путь.
Аватара пользователя
Divan
Сообщения: 859
Зарегистрирован: Пн июл 08, 2019 5:04 pm
Благодарил (а): 117 раз
Поблагодарили: 280 раз

Re: Простое голосовое управление системой

Сообщение Divan » Чт авг 13, 2020 9:44 pm

Вставляем сюда
СпойлерПоказать
Безымянный.jpg
Безымянный.jpg (126.65 КБ) 2979 просмотров
Экспортируйте к себе этот элемент на сцену, для теста. Так вы будете понимать, как это работает.
Elements21-45-15.zip
(2.02 КБ) 143 скачивания
Xpenology DSM 6.2.2 + Ubuntu Server 18.10 + Majordomo + MariaDB
den52859
Сообщения: 8
Зарегистрирован: Чт окт 29, 2020 11:39 am
Благодарил (а): 2 раза
Поблагодарили: 0

Re: Простое голосовое управление системой

Сообщение den52859 » Пн ноя 16, 2020 8:18 am

Можете на пальцах объяснить принцип? Как я понял, на сцене создается HTML элемент, при нажатии на который запускается распознавание речи? А как нибудь без кнопки всё это реализовать можно?
Аватара пользователя
SmoKE_xDDD
Сообщения: 816
Зарегистрирован: Ср апр 17, 2019 5:00 pm
Откуда: Нижний Новгород
Благодарил (а): 110 раз
Поблагодарили: 898 раз

Re: Простое голосовое управление системой

Сообщение SmoKE_xDDD » Пн ноя 16, 2020 12:48 pm

den52859 писал(а):
Пн ноя 16, 2020 8:18 am
Можете на пальцах объяснить принцип? Как я понял, на сцене создается HTML элемент, при нажатии на который запускается распознавание речи? А как нибудь без кнопки всё это реализовать можно?
Там есть комментарии по поводу того, как сделать вечное прослушивание
den52859
Сообщения: 8
Зарегистрирован: Чт окт 29, 2020 11:39 am
Благодарил (а): 2 раза
Поблагодарили: 0

Re: Простое голосовое управление системой

Сообщение den52859 » Ср ноя 18, 2020 11:55 pm

SmoKE_xDDD писал(а):
Пн ноя 16, 2020 12:48 pm
den52859 писал(а):
Пн ноя 16, 2020 8:18 am
Можете на пальцах объяснить принцип? Как я понял, на сцене создается HTML элемент, при нажатии на который запускается распознавание речи? А как нибудь без кнопки всё это реализовать можно?
Там есть комментарии по поводу того, как сделать вечное прослушивание
А какой элемент создавать?
Vairen
Сообщения: 13
Зарегистрирован: Чт июн 03, 2021 1:07 pm
Благодарил (а): 7 раз
Поблагодарили: 0

Re: Простое голосовое управление системой

Сообщение Vairen » Вс июн 20, 2021 3:13 pm

Подскажите, а как вы реализовали вызов "Шаблонов поведения"?

PS - У меня много времени ушло на поиски ошибки. А причиной было то, что "Простое голосовое управление системой" не работает в "FireFox" а linux он по умолчанию и не работает в "Opera". В "Google Chrome" и в Yandex браузере работает.
Ответить