Як побудувати інтерфейс чат-бота

Автор: Randy Alexander
Дата Створення: 2 Квітень 2021
Дата Оновлення: 16 Травень 2024
Anonim
Пишем TELEGRAM бота на Python
Відеоролик: Пишем TELEGRAM бота на Python

Зміст

У середині 2000-х віртуальні агенти та чат-боти з обслуговування клієнтів отримали велике сподобання, хоча вони не дуже розмовляли, і під капотом вони просто складалися з обміну даними з веб-серверами.

У наш час, хоча існує величезна кількість прикладів "слабкого ШІ" (включаючи Siri, Alexa, веб-пошукові системи, автоматизовані перекладачі та розпізнавання облич) та інші теми, такі як адаптивний веб-дизайн, все ще викликають хвилювання, чат-боти все ще викликають ажіотаж . Завдяки великим інвестиціям великих компаній залишається безліч можливостей зламати розмовні інтерфейси майбутнього.

  • Як розробити чат-бот

Іноді вони отримують погану репутацію, але чат-боти можуть бути корисними. Їм не потрібно відчувати себе базовою заміною стандартної веб-форми, де користувач заповнює поля введення і чекає перевірки - вони можуть забезпечити розмову.


По суті, ми покращуємо взаємодію з користувачем, щоб відчувати себе більш природньо, як, наприклад, спілкування з експертом чи другом, замість жестів і натискань веб-браузера чи мобільних жестів. Мета полягає в тому, що, надаючи емпатичні, контекстуальні відповіді, ця технологія буде вбудована безпосередньо в життя людей.

Перегляньте відео нижче або прочитайте далі, щоб відкрити практичний спосіб розробки та побудови чат-бота, заснованого на реальному застосуванні проекту, що застосовується в практиці проектування послуг.

01. Встановити особистість

Оскільки ця практика обслуговує понад 110 000 членів у всьому світі, метою було забезпечити швидкий, зручний та природний інтерфейс, за допомогою якого внутрішні зацікавлені сторони можуть запитувати ефективні цифрові послуги, замість того, щоб заповнювати заплутані форми.

Першим кроком було встановити особистість чат-бота, оскільки це представляло б голос команди дизайнерів послуг для його зацікавлених сторін. Ми спиралися на основоположну роботу Ааррона Вальтера щодо дизайнерських персон. Це дуже допомогло нашій команді розробити риси особистості бота, які потім визначали повідомлення для привітань, помилок та відгуків користувачів.


Це делікатний етап, оскільки він впливає на те, як сприймається організація. Щоб переконатися, що ми маємо якомога більше інформації, ми негайно організували семінари для зацікавлених сторін, щоб залучити відповідну особистість, колір, типографіку, зображення та потік користувача під час взаємодії з ботом.

Після того, як ми отримали всі необхідні дозволи, включаючи пошук юрисконсульта, ми взяли за мету перетворити архаїчні форми запитів на низку запитань уперед-назад, що імітували розмову між зацікавленими сторонами та представником нашої команди дизайнерських служб.

02. Використовуйте RiveScript

Ми знали, що не хочемо заглиблюватися в мову розмітки ШІ для обробної частини - нам просто потрібно було достатньо для швидкого запуску досвіду.

RiveScript - це простий API чат-ботів, який досить простий у вивченні та достатній для наших потреб. Протягом кількох днів у нас була логіка прийняти запит проекту від бота і проаналізувати його з достатньою бізнес-логікою, щоб перевірити та класифікувати його, щоб його можна було відправити через служби JSON REST у відповідну внутрішню чергу завдань проекту.


Щоб цей основний чат-бот працював, перейдіть до репозиторію RiveScript, клонуйте його та встановіть усі стандартні залежності Node. У репо ви також можете відчути смак взаємодій, які можна додати за допомогою різних прикладних фрагментів.

Далі запустіть папку веб-клієнта, яка перетворює бота на веб-сторінку, запустивши базовий сервер Grunt. На цьому етапі ви можете покращити досвід відповідно до ваших потреб.

03. Створіть мозок свого бота

Наступним кроком є ​​створення «мозку» нашого бота. Це вказано у файлах із розширенням .RIVE, і, на щастя, RiveScript вже постачається із базовими взаємодіями нестандартно (наприклад, такими питаннями, як: "Як вас звати?", "Скільки вам років?" Та "Якою є ваша улюблений колір? ').

Коли ви запускаєте програму веб-клієнта за допомогою відповідної команди Node, HTML-файлу доручається завантажити їх.RIVE файлів.

Далі нам потрібно сформувати частину мозку нашого чат-бота, яка буде обробляти запити проектів. Наша головна мета - перетворити добірку питань, що стосуються проекту, у звичайну розмову.

Так, наприклад:

  • Привіт, як ми можемо допомогти?
  • Чудово, як швидко нам потрібно починати?
  • Чи можете ви дати вам приблизне уявлення про ваш бюджет?
  • Розкажи мені більше про свій проект ...
  • Як ви почули про нас?

Типова доступна веб-форма буде виглядати так:

form action = ""> fieldset> legend> Тип запиту: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> option 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> варіант 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 місяць / label> br> input id = "один-три місяці" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "один місяць"> 1-3 місяці / label> br> input id = "чотири-плюс-місяці" type = "radio" name = "request- timeline" value = "four-plus-months"> label for = "four-plus-months"> 4+ місяців / label> br> / fieldset> br> label for = "request-budget"> Інформація про бюджет / label> br> textarea id = "request-budget" name = "request-budget-text" рядки = "10" cols = "30"> / textarea> br> label for = "request-description"> Опис проекту / label> br> textarea id = "request-description" name = "request- description-text" рядки = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" рядки = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>

З веб-формами ми добре знайомі з певними шаблонами: ви натискаєте кнопку Надіслати, всі дані форми надсилаються на іншу сторінку, де обробляється запит, і тоді, швидше за все, з’являється нахабна сторінка Дякую.

За допомогою чат-ботів ми можемо взяти участь у поданні запиту та зробити його більш значущим.

04. Сформуйте голос

Щоб перетворити цю форму на розмовний користувальницький інтерфейс, що обслуговується у веб-клієнті чату RiveScript, нам потрібно перетворити інформаційну архітектуру з жорсткої на текучу; або мітки полів у рядки інтерфейсу користувача.

Давайте розглянемо деякі мітки доступних полів та відповідний тон запитання:

  • Запит: Чим ми можемо допомогти? Не впевнений? Ви не проти, якщо я задам кілька запитань?
  • Хронологія: Як швидко нам потрібно розпочати?
  • Інформація про бюджет: Чи можете ви дати вам приблизне уявлення про ваш бюджет?
  • Опис проекту: Гаразд, можете сказати короткий виклад проблеми, яку потрібно вирішити?
  • Довідково: Крім того, хто вас направив до нас?

Далі нам потрібно перетворити код веб-форми у сценарій AI, дотримуючись дуже вчуваної логіки обробки RiveScript для двосторонніх розмов:

- Чим ми можемо допомогти? + *% як ми можемо допомогти - встановити області = varSure, Ви не заперечуєте, якщо я задам пару питань? + *% впевнені, що ви не заперечуєте, якщо я задаю пару запитань - як швидко мені потрібно розпочати цей запит? + *% як швидко мені потрібно розпочати цей запит - встановити коли = varЧи можете ви дати мені приблизне уявлення про ваш бюджет? + *% Ви можете дати мені приблизне уявлення про Ваш бюджет - встановити бюджет = varOK, можете сказати короткий зміст проблеми, яку потрібно вирішити, компоненти та середовища, що зазнали впливу, або загальний опис? + *% добре, чи можете ви сказати мені короткий виклад проблеми, яку потрібно вирішити, компоненти та середовища, що зазнали впливу, або загальний опис - set project = varAlso, хто вас направив до нас? + *% також, хто вас до нас направив - встановіть referal = vargreat ось що я досі отримав: n Потрібні послуги: отримати області> n Потрібно почати: отримати коли> n Грубий бюджет: отримати бюджет> n Про ваш проект: отримати проект> n Перенаправлено: отримати реферал> n і незабаром зв’яжеться, чи є щось, що я можу вам допомогти сьогодні? виклик> приймати зони отримання> отримувати коли> отримувати бюджет> отримувати проект> отримувати реферал> / дзвінок>

05. Подання запиту

На відміну від того, що стандартні змінні форми надсилаються на іншу сторінку або службу для обробки, чат-боти можуть перевіряти та подавати інформацію, введену користувачем у вікні чату (або вимовлену), негайно, що означає, що користувачі також можуть легко переглянути раніше введені значення.

Нам потрібно було надіслати запит користувача, введений в інтерфейсі чат-бота через JSON REST API, на зовнішній сервер завдань проекту.

У RiveScript-js ми можемо використовувати XMLHttpRequest об'єкт подати запит майже одночасно, оскільки дані вводяться користувачем:

> прийом об'єктів javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "області"); var b = rs.getUservar (rs.currentUser (), "коли"); var c = rs.getUservar (rs.currentUser (), "бюджет"); var d = rs.getUservar (rs.currentUser (), "проект"); var e = rs.getUservar (rs.currentUser (), "реферал"); var url = "http: // localhost: 3000 / send"; var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (параметри); http.open ("POST", url, true); http.setRequestHeader ("Тип вмісту", "application / x- www-form-urlencoded"); http.setRequestHeader ("З'єднання", "закрити"); http.onreadystatechange = function () {// Виклик функції при зміні стану. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (параметри); об'єкт

06. Не бійтеся чат-бота

Незабаром сучасні способи взаємодії з комп’ютерами для отримання інформації поступляться технологіям на основі штучного інтелекту, таким як чат-боти, де люди просто виконують прості голосові команди, як ми бачили з такими технологіями, як Amazon Echo та Google Home.

Співтовариству веб-дизайну не потрібно боятися - ми всі повинні сприймати додану вартість цієї нової технології.

Це може змінити ігри компаній, для яких він працює, пропонуючи повністю масштабоване обслуговування клієнтів та покращений інтелект клієнтів.

Ця стаття спочатку була представлена ​​вмережевий журнал, самий продаваний у світі журнал для веб-дизайнерів та розробників. Підпишіться тут.

Рекомендується Вам
Як зобразити світло, що світиться крізь хутро
Прочитати

Як зобразити світло, що світиться крізь хутро

Коли малюю цифрове світло у хутрі, я намагаюся скористатися перевагами яскравих стилів світлового шару Photo hop. Перемикаючись між м’яким світлом, жорстким світлом та накладанням, і бачачи, що найкра...
Соціальні медіа для художників: рятівний круг чи прокляття?
Прочитати

Соціальні медіа для художників: рятівний круг чи прокляття?

Подобається Ретвіти. Прихильники. Усі вони стали загальноприйнятими способами оцінити популярність наших думок, а для тих, хто займається креативною галуззю, наша робота. Але чи є такі сайти, як Faceb...
Створіть адаптивний сайт за тиждень: рухайтесь далі (частина 5)
Прочитати

Створіть адаптивний сайт за тиждень: рухайтесь далі (частина 5)

Потрібні знання: Проміжні C та HTMLВимагає: Текстовий редактор, сучасний браузер, графічне програмне забезпеченняЧас проекту: 1 година (всього 5 годин)Хоча адаптивний веб-дизайн може допомогти нам ств...