Jak zbudować interfejs chatbota

Autor: Randy Alexander
Data Utworzenia: 2 Kwiecień 2021
Data Aktualizacji: 16 Móc 2024
Anonim
How to build a chatbot interface
Wideo: How to build a chatbot interface

Zawartość

W połowie XXI wieku wirtualni agenci i chatboty do obsługi klienta cieszyły się dużym uznaniem, mimo że nie były zbyt rozmowne, a pod maską składały się jedynie z wymiany danych z serwerami internetowymi.

W dzisiejszych czasach, mimo że istnieje ogromna liczba przykładów `` słabej sztucznej inteligencji '' (w tym Siri, Alexa, wyszukiwarki internetowe, automatyczne tłumacze i rozpoznawanie twarzy) oraz inne tematy, takie jak responsywne projektowanie witryn internetowych, zajmuje się tym, chatboty wciąż wywołują zamieszanie . Dzięki dużym inwestycjom dużych firm istnieje wiele możliwości włamania się do interfejsów konwersacyjnych przyszłości.

  • Jak zaprojektować chatbota

Czasami mają złą reputację, ale chatboty mogą być przydatne. Nie muszą czuć się jak zwykły zamiennik standardowego formularza internetowego, w którym użytkownik wypełnia pola wejściowe i czeka na walidację - mogą zapewnić konwersację.


Zasadniczo poprawiamy wrażenia użytkownika, aby czuć się bardziej naturalnie, jak rozmowa z ekspertem lub przyjacielem, zamiast za pomocą wskazywania i klikania w przeglądarce internetowej lub gestów mobilnych. Celem jest, aby poprzez empatyczne, kontekstowe odpowiedzi, technologia ta została bezpośrednio zakorzeniona w życiu ludzi.

Obejrzyj poniższy film lub czytaj dalej, aby odkryć praktyczny sposób projektowania i budowania chatbota w oparciu o rzeczywistą aplikację do pobierania projektów w praktyce projektowania usług.

01. Ustaw osobowość

Ponieważ praktyka ta obsługuje ponad 110 000 członków na całym świecie, celem było zapewnienie szybkiego, wygodnego i naturalnego interfejsu, za pośrednictwem którego wewnętrzni interesariusze mogliby zażądać skutecznych usług cyfrowych, zamiast wypełniać mylące formularze.

Pierwszym krokiem było ustalenie osobowości chatbota, ponieważ stanowiłoby to głos zespołu projektowego dla jego interesariuszy. Oparliśmy się na przełomowych pracach Aarrona Waltera dotyczących osobowości projektantów. To bardzo pomogło naszemu zespołowi rozwinąć cechy osobowości bota, które następnie określały wiadomości z pozdrowieniami, błędami i opiniami użytkowników.


To delikatny etap, ponieważ wpływa na postrzeganie organizacji. Aby upewnić się, że mamy jak najwięcej informacji, natychmiast zorganizowaliśmy warsztaty dla interesariuszy, aby ustalić odpowiednią osobowość, kolor, typografię, obrazy i przepływ użytkownika podczas interakcji z botem.

Po uzyskaniu wszystkich niezbędnych zgód - w tym po zasięgnięciu porady prawnej - postanowiliśmy przekształcić archaiczne formularze wniosków w serię powtarzających się pytań, które naśladują rozmowę między interesariuszami a przedstawicielem naszego zespołu usług projektowych.

02. Użyj RiveScript

Wiedzieliśmy, że nie chcemy zbytnio zagłębiać się w język znaczników sztucznej inteligencji dla części przetwarzania - potrzebowaliśmy tylko wystarczająco dużo, aby przyspieszyć działanie.

RiveScript to prosty interfejs API chatbota, który jest dość łatwy do nauczenia i wystarczający dla naszych potrzeb. W ciągu kilku dni mieliśmy logikę, aby pobrać żądanie projektu od bota i przeanalizować je z wystarczającą logiką biznesową, aby zweryfikować i sklasyfikować go, aby można było go wysłać przez usługi JSON REST do odpowiedniej wewnętrznej kolejki zadań projektowych.


Aby uruchomić ten podstawowy chatbot, przejdź do repozytorium RiveScript, sklonuj go i zainstaluj wszystkie standardowe zależności Node. W repozytorium możesz również posmakować interakcji, które możesz dodać za pomocą różnych przykładowych fragmentów.

Następnie uruchom folder klienta sieci Web, który zamienia bota w stronę internetową, uruchamiając podstawowy serwer Grunt. W tym momencie możesz ulepszyć wrażenia, aby odpowiadały Twoim potrzebom.

03. Wygeneruj mózg swojego bota

Następnym krokiem jest wygenerowanie „mózgu” naszego bota. Jest to określone w plikach z rozszerzeniem .RIVE i na szczęście RiveScript zawiera już podstawowe interakcje po wyjęciu z pudełka (na przykład pytania takie jak `` Jak masz na imię? '', `` Ile masz lat? '' I `` Jakie jest twoje ulubiony kolor?').

Po zainicjowaniu aplikacji klienta sieci Web za pomocą odpowiedniego polecenia Node plik HTML jest instruowany, aby je załadować.ROZŁUPAĆ akta.

Następnie musimy wygenerować część mózgu naszego chatbota, która będzie zajmować się prośbami o projekty. Naszym głównym celem jest przekształcenie wybranych pytań wstępnych dotyczących zadań projektowych w zwykłą rozmowę.

Na przykład:

  • Witam, jak możemy pomóc?
  • Świetnie, jak szybko musimy zacząć?
  • Czy możesz mi podać ogólny obraz swojego budżetu?
  • Opowiedz mi więcej o swoim projekcie ...
  • Jak o nas usłyszałeś?

Typowy dostępny formularz internetowy wyglądałby tak:

form action = ""> fieldset> legenda> Typ żądania: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> opcja 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"> option 3 / label> br> / fieldset > fieldset> legend> Oś czasu: / legend> input id = "jeden miesiąc" type = "radio" name = "request-timeline" value = "one-month"> label for = "jeden miesiąc"> 1 miesiąc / label> br> input id = "jeden-trzy miesiące" type = "radio" name = "request-timeline" value = "one-three-months"> label for = "jeden miesiąc"> 1-3 miesiące / label> br> input id = "cztery plus-miesiące" type = "radio" name = "request- timeline" value = "cztery plus-miesiące"> label for = "cztery plus-miesiące"> ponad 4 miesiące / label> br> / fieldset> br> label for = "request-budget"> Informacje o budżecie / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Project Description / label> br> textarea id = "request-description" name = "request-description-text" rows = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>

W przypadku formularzy internetowych dobrze znamy pewne wzorce: po kliknięciu przycisku Prześlij wszystkie dane formularza są wysyłane na inną stronę, na której przetwarzane jest żądanie, a następnie najprawdopodobniej wyskakuje bezczelna strona z podziękowaniami.

Dzięki chatbotom jesteśmy w stanie przyjąć interakcję związaną z przesłaniem prośby i nadać jej bardziej sensowny charakter.

04. Zaprojektuj głos

Aby przekształcić ten formularz w konwersacyjny interfejs użytkownika obsługiwany w kliencie sieciowym chatbota RiveScript, musimy przekształcić architekturę informacji ze sztywnej na płynną; lub etykiety pól w ciągi interfejsu użytkownika.

Rozważmy kilka dostępnych etykiet pól i powiązany z nimi ton pytania:

  • Żądanie: Jak możemy pomóc? Niepewny? Masz coś przeciwko, jeśli zadam kilka pytań?
  • Oś czasu: Jak szybko musimy zacząć?
  • Informacje o budżecie: Czy możesz mi podać ogólny obraz swojego budżetu?
  • Opis Projektu: OK, czy możesz mi powiedzieć podsumowanie problemu do rozwiązania?
  • Odniesienie: Kto cię do nas skierował?

Następnie musimy przekonwertować kod formularza internetowego na skrypt sztucznej inteligencji, zgodnie z logiką przetwarzania RiveScript, która jest bardzo łatwa do nauczenia dla rozmów dwukierunkowych:

- Jak możemy pomóc? + *% jak możemy pomóc - ustaw obszary = varSure, czy masz coś przeciwko, jeśli zadam kilka pytań? + *% na pewno nie masz nic przeciwko, jeśli zadam kilka pytań - Jak szybko muszę rozpocząć tę prośbę? + *% jak szybko muszę rozpocząć to żądanie - ustaw kiedy = varCzy możesz mi podać przybliżony obraz swojego budżetu? + *% czy możesz mi podać przybliżony obraz swojego budżetu - ustaw budżet = varOK, czy możesz podać podsumowanie problemu do rozwiązania, komponenty i środowiska, na które ma on wpływ, czy też ogólny opis? + *% ok, czy możesz mi powiedzieć podsumowanie problemu do rozwiązania, komponenty i środowiska, których to dotyczy lub ogólny opis - ustaw projekt = var. Kto cię do nas skierował? + *% również kto Cię do nas skierował - ustaw referal = vargreat tutaj jest to, co otrzymałem do tej pory: n Potrzebne usługi: znajdź obszary> n Musisz zacząć: uzyskaj kiedy> n Szorstki budżet: uzyskaj budżet> n O Twoim projekcie: zdobądź projekt> n Polecony przez: uzyskaj polecenie> n, a wkrótce skontaktuję się z Tobą. Czy jest jeszcze coś, w czym mogę Ci dzisiaj pomóc? zadzwoń> pobierz obszary> uzyskaj kiedy> uzyskaj budżet> uzyskaj projekt> uzyskaj polecenie> / zadzwoń>

05. Wniosek o złożenie wniosku

W przeciwieństwie do standardowych zmiennych formularza wysyłanych do innej strony lub usługi w celu przetworzenia, chatboty mogą natychmiast sprawdzać i przesyłać informacje wprowadzone przez użytkownika w oknie czatu (lub wypowiadane), co oznacza, że ​​użytkownicy mogą również łatwo powracać do wcześniej wprowadzonych wartości.

Musieliśmy wysłać żądanie użytkownika wprowadzone w interfejsie użytkownika chatbota za pośrednictwem interfejsu API JSON REST na zewnętrzny serwer zadań projektowych.

W RiveScript-js możemy swobodnie korzystać z rozszerzenia XMLHttpRequest sprzeciwić się złożeniu żądania niemal jednocześnie, ponieważ dane są wprowadzane przez użytkownika:

> pobór obiektu javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "obszary"); var b = rs.getUservar (rs.currentUser (), "kiedy"); var c = rs.getUservar (rs.currentUser (), "budżet"); var d = rs.getUservar (rs.currentUser (), "projekt"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "area =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (params); http.open („POST”, url, prawda); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Połączenie", "zamknij"); http.onreadystatechange = function () {// Wywołaj funkcję, gdy stan się zmieni. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); obiekt

06. Nie bój się chatbota

Wkrótce obecne sposoby interakcji z komputerami w celu uzyskania informacji ustąpią technologii opartej na sztucznej inteligencji, takiej jak chatboty, w których ludzie po prostu wydają proste polecenia głosowe, jak widzieliśmy w przypadku technologii takich jak Amazon Echo i Google Home.

Społeczność projektantów stron internetowych nie musi się bać - wszyscy powinniśmy doceniać wartość dodaną tej nowej technologii.

Może to zmienić zasady gry dla firm, dla których pracuje, oferując w pełni skalowalną obsługę klienta i ulepszoną inteligencję klienta.

Ten artykuł został pierwotnie przedstawiony wmagazyn sieciowy, najlepiej sprzedający się magazyn na świecie dla projektantów i programistów stron internetowych. Zapisz się tutaj.

Fascynujące Publikacje
TEST: Nokia Lumia 900
Czytaj Więcej

TEST: Nokia Lumia 900

Ze w zy tkich telefonów Lumia wygląda chyba najfajniej. To świetny projekt. Niezależnie od tego, czy je t to biały, czarny, niebie ki czy różowy (tak, różowy), forma telefonu je t bardz...
Recenzja iPada 2020
Czytaj Więcej

Recenzja iPada 2020

Pomimo prze tarzałej kon trukcji nowy iPad je t w paniałym narzędziem kreatywnym dzięki ob łudze Apple Pencil, dużej mocy i przyzwoitej żywotności baterii. To powiedziaw zy, nie warto uaktualniać z ze...
Stwórz ręcznie rysowaną estetykę w After Effects
Czytaj Więcej

Stwórz ręcznie rysowaną estetykę w After Effects

W tym amouczku będę używać natywnych wtyczek do zniek ztałcania i zor tkowania animacji cyfrowej, aby wyglądała bardziej ręcznie. W tym przykładzie moja ekwencja źródłowa miała za to owany obry ,...