Как создать свой собственный AI AI Assistant с помощью Api.ai

Поиск ключей API Api.ai

Ключи API, которые вам нужны, находятся на странице настроек агента. Чтобы найти это, нажмите на значок Cog рядом с именем вашего агента. На появившейся странице скопируйте и вставьте «токен доступа клиента» в безопасное место. Вот что нам нужно сделать для запросов к сервису Api.ai:

Код

Если вы хотите посмотреть на работающий код и поиграть с ним, он доступен на GitHub . Не стесняйтесь использовать его и расширить идею для своего личного помощника AI.

Если вы хотите попробовать это, у меня есть Барри, бегущий прямо здесь . Наслаждайтесь!

Подключение к Api.ai с помощью JavaScript

В настоящее время у вас есть работающий личный помощник, который работает где-то в облаке Api.ai. Теперь вам нужен способ поговорить с вашим личным помощником из собственного интерфейса. Api.ai имеет ряд SDK для платформ, которые работают с Android, iOS, веб-приложениями, Unity, Cordova, C ++ и другими. Вы даже можете интегрировать его в бот Slack или бот Facebook Messenger! В этом примере вы будете использовать HTML и JavaScript для создания простого веб-приложения для личного помощника. Моя демонстрация основана на концепциях, представленных в HTML + JS гистограмме Api.ai.

Ваше приложение будет делать следующее:

• Примите письменную команду в поле ввода, отправив эту команду, когда вы нажмете клавишу Enter.
• ИЛИ, используя API распознавания речи HTML5 (это работает только в Google Chrome 25 и выше), если пользователь нажимает «Говорить», он может произносить свои команды и автоматически записывать их в поле ввода.
• Как только команда получена, вы можете использовать jQuery для отправки запроса AJAX POST на Api.ai. Api.ai вернет свои знания в виде объекта JSON, как вы видели выше в тестовой консоли.
• Вы прочтете этот файл JSON с помощью JavaScript и отобразите результаты в своем веб-приложении.
• Если доступно, ваше веб-приложение также будет использовать Web Speech API (доступно в Google Chrome 33 и выше), чтобы ответить вам в устной форме.

Целое веб-приложение доступно на GitHub по ссылке выше. Не стесняйтесь обращаться к этому, чтобы увидеть, как я стилизовал вещи и структурировал HTML. Я не буду объяснять каждую часть того, как это собрано в этой статье, сосредоточив внимание в основном на стороне Api.ai SDK. Я также укажу и кратко объясню, какие биты используют API распознавания речи HTML5 и Web Speech API.

Ваш JavaScript содержит следующие переменные:

 var accessToken = "YOURACCESSTOKEN", baseUrl = "https://api.api.ai/v1/", $speechInput, $recBtn, recognition, messageRecording = "Recording...", messageCouldntHear = "I couldn't hear you, could you say that again?", messageInternalError = "Oh no, there has been an internal server error", messageSorry = "I'm sorry, I don't have the answer to that yet."; ввода var accessToken = "YOURACCESSTOKEN", baseUrl = "https://api.api.ai/v1/", $speechInput, $recBtn, recognition, messageRecording = "Recording...", messageCouldntHear = "I couldn't hear you, could you say that again?", messageInternalError = "Oh no, there has been an internal server error", messageSorry = "I'm sorry, I don't have the answer to that yet."; 

Вот для чего каждый из них:

• accessToken . Это ключ API, который вы скопировали из интерфейса Api.ai. Они дают вам разрешение на доступ к SDK, а также говорят, к какому агенту вы обращаетесь. Я хочу получить доступ к Барри, моему личному агенту.
• baseUrl . Это базовый URL-адрес для всех вызовов Api.ai SDK. Если выйдет новая версия SDK, вы можете обновить ее здесь.
• $speechInput . Здесь хранится ваш элемент <input> чтобы вы могли получить к нему доступ в своем JavaScript.
• $recBtn . Здесь хранится элемент <button> который вы будете использовать, когда пользователь захочет вместо этого нажать и поговорить с веб-приложением.
• recognition . Вы сохраняете свою функциональность webkitSpeechRecognition() в этой переменной. Это для API распознавания речи HTML5.
• messageRecording , messageCouldntHear , messageInternalError и messageSorry . Это сообщения, которые отображаются, когда приложение записывает голос пользователя, не может слышать его голос, когда у вас есть внутренняя ошибка, и если ваш агент не понимает. Вы сохраняете их как переменные, чтобы вы могли легко изменить их в верхней части вашего скрипта, а также чтобы вы могли указать, какие из них вы не хотите, чтобы приложение произносило вслух позже.

В этих строках кода ищите, когда пользователь нажимает клавишу Enter в поле ввода. Когда это происходит, запустите функцию send() чтобы отправить данные в Api.ai:

 $speechInput.keypress(function(event) { if (event.which == 13) { event.preventDefault(); send(); } }); 

Затем проверьте, нажимает ли пользователь кнопку записи, чтобы попросить приложение прослушать их (или, если оно прослушивает, приостановить прослушивание). Если они щелкают по нему, запустите switchRecognition() чтобы переключиться с записи на запись без записи, и наоборот:

 $recBtn.on("click", function(event) { switchRecognition(); }); 

Наконец, для начальной настройки jQuery вы устанавливаете кнопку, которая будет в правом нижнем углу экрана, чтобы показать и скрыть ответ JSON. Это просто для того, чтобы держать вещи в чистоте: большую часть времени вам не захочется видеть данные JSON, которые поступают, но время от времени, если происходит что-то непредвиденное, вы можете нажимать эту кнопку, чтобы переключать режим просмотра JSON или нет. :

 $(".debug__btn").on("click", function() { $(this).next().toggleClass("is-active"); return false; }); 

Использование API распознавания речи в HTML5

Как упоминалось выше, вы будете использовать API распознавания речи HTML5 для прослушивания пользователя и расшифровки его слов. На данный момент это работает только в Google Chrome.

 function startRecognition() { recognition = new webkitSpeechRecognition(); recognition.onstart = function(event) { respond(messageRecording); updateRec(); }; recognition.onresult = function(event) { recognition.onend = null; var text = ""; for (var i = event.resultIndex; i 

 function stopRecognition() { if (recognition) { recognition.stop(); recognition = null; } updateRec(); } 

 function switchRecognition() { if (recognition) { stopRecognition(); } else { startRecognition(); } } 

 function send() { var text = $speechInput.val(); $.ajax({ type: "POST", url: baseUrl + "query", contentType: "application/json; charset=utf-8", dataType: "json", headers: { "Authorization": "Bearer " + accessToken }, data: JSON.stringify({query: text, lang: "en", sessionId: "runbarry"}), success: function(data) { prepareResponse(data); }, error: function() { respond(messageInternalError); } }); } 

 function prepareResponse(val) { var debugJSON = JSON.stringify(val, undefined, 2), spokenResponse = val.result.speech; respond(spokenResponse); debugRespond(debugJSON); } 

 function debugRespond(val) { $("#response").text(val); } 

 function respond(val) { if (val == "") { val = messageSorry; } if (val !== messageRecording) { var msg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); msg.voiceURI = "native"; msg.text = val; msg.lang = "en-US"; window.speechSynthesis.speak(msg); } $("#spokenResponse").addClass("is-active").find(".spoken-response__text").html(val); } 

 if (val == "") { val = messageSorry; } 

 if (val !== messageRecording) { var msg = new SpeechSynthesisUtterance(); msg.voiceURI = "native"; msg.text = val; msg.lang = "en-US"; window.speechSynthesis.speak(msg); } 

 $("#spokenResponse").addClass("is-active").find(".spoken-response__text").html(val);