Cara membina antara muka chatbot

Pengarang: Randy Alexander
Tarikh Penciptaan: 2 April 2021
Tarikh Kemas Kini: 16 Mungkin 2024
Anonim
CARA MUDAH MERANGKAI KATA SAAT BICARA DI DEPAN UMUM | Ustadz Muhammad Maliki | Seri #5
Video.: CARA MUDAH MERANGKAI KATA SAAT BICARA DI DEPAN UMUM | Ustadz Muhammad Maliki | Seri #5

Kandungan

Pada pertengahan tahun 2000-an, ejen maya dan chatbots perkhidmatan pelanggan mendapat banyak pujian, walaupun tidak begitu banyak perbualan, dan di bawah mereka hanya terdiri daripada pertukaran data dengan pelayan web.

Pada masa kini, walaupun terdapat sebilangan besar contoh 'AI lemah' (termasuk Siri, Alexa, enjin carian web, penterjemah automatik dan pengecaman wajah) dan topik lain seperti reka bentuk web responsif menjadi perhatian utama, chatbots masih menimbulkan kegemparan . Dengan pelaburan besar dari syarikat besar, masih ada banyak peluang untuk meretas antara muka perbualan masa depan.

  • Cara merancang pengalaman chatbot

Kadang kala mereka mendapat reputasi buruk, tetapi chatbots boleh berguna. Mereka tidak perlu merasa sebagai pengganti asas untuk borang web standard, di mana pengguna mengisi bidang input dan menunggu pengesahan - mereka dapat memberikan pengalaman perbualan.


Pada asasnya, kami meningkatkan pengalaman pengguna untuk merasa lebih semula jadi, seperti bercakap dengan pakar atau rakan, bukannya titik-dan-klik penyemak imbas web atau gerak isyarat mudah alih. Tujuannya adalah bahawa dengan memberikan respons empati, kontekstual, teknologi ini akan tertanam langsung dalam kehidupan orang.

Tonton video di bawah atau baca terus untuk mengetahui kaedah praktikal untuk merancang dan membina chatbot, berdasarkan aplikasi pengambilan projek sebenar dalam amalan reka bentuk perkhidmatan.

01. Tetapkan keperibadian

Oleh kerana amalan ini melayani lebih dari 110,000 anggota di seluruh dunia, tujuannya adalah untuk menyediakan antara muka yang cepat, mudah dan semula jadi melalui mana pihak berkepentingan dalaman dapat meminta perkhidmatan digital yang berkesan, dan bukannya harus mengisi borang yang membingungkan.

Langkah pertama adalah untuk membentuk keperibadian chatbot, kerana ini akan mewakili suara pasukan reka bentuk perkhidmatan kepada pihak berkepentingannya. Kami membina karya penting Aarron Walter pada personaliti rekaan. Ini sangat membantu pasukan kami mengembangkan sifat keperibadian bot, yang kemudian menentukan mesej untuk ucapan, kesalahan dan maklum balas pengguna.


Ini adalah tahap yang halus, kerana mempengaruhi bagaimana organisasi dirasakan. Untuk memastikan kami mempunyai sebanyak mungkin maklumat, kami segera mengadakan bengkel pihak berkepentingan untuk mendapatkan keperibadian, warna, tipografi, citra dan aliran pengguna yang sesuai ketika terlibat dengan bot.

Setelah kami memperoleh semua persetujuan yang diperlukan - termasuk mencari penasihat undang-undang - kami berangkat untuk mengubah bentuk permintaan kuno menjadi serangkaian pertanyaan bolak-balik yang meniru perbualan antara pihak berkepentingan dan wakil pasukan perkhidmatan reka bentuk kami.

02. Gunakan RiveScript

Kami tahu bahawa kami tidak mahu terlalu mendalam dengan bahasa markup AI untuk bahagian pemprosesan - kami hanya memerlukan cukup untuk memulakan pengalaman.

RiveScript adalah API chatbot sederhana yang cukup mudah untuk dipelajari dan mencukupi untuk keperluan kita. Dalam beberapa hari, kami memiliki logik untuk menerima permintaan projek dari bot, dan menguraikannya dengan logik perniagaan yang cukup untuk mengesahkan dan mengkategorikannya sehingga dapat dikirimkan melalui perkhidmatan JSON REST ke antrian tugas projek dalaman yang sesuai.


Untuk membolehkan chatbot asas ini berfungsi, pergi ke repo RiveScript, klon dan pasangkan semua pergantungan Node standard. Di repo anda juga dapat merasakan interaksi yang boleh anda tambahkan dengan pelbagai contoh coretan.

Seterusnya, jalankan folder pelanggan web, yang mengubah bot menjadi laman web dengan menjalankan pelayan Grunt asas. Pada tahap ini anda dapat meningkatkan pengalaman sesuai dengan keperluan anda.

03. Hasilkan otak bot anda

Langkah seterusnya adalah menghasilkan 'otak' bot kita. Ini dinyatakan dalam fail dengan pelanjutan .RIVE, dan untungnya RiveScript sudah hadir dengan interaksi asas di luar kotak (misalnya, soalan seperti 'Siapa nama anda?', 'Berapa umur anda?' Dan 'Apa nama anda? warna kegemaran?').

Apabila anda memulakan aplikasi pelanggan web menggunakan perintah Node yang betul, fail HTML diperintahkan untuk memuatnya.LANGSUNG fail.

Seterusnya kita perlu menjana bahagian otak chatbot kita yang akan menangani permintaan projek. Matlamat utama kami adalah untuk menukar pilihan soalan tugasan projek menjadi perbualan biasa.

Jadi, sebagai contoh:

  • Helo, bagaimana kita boleh membantu?
  • Hebat, berapa lama kita perlu memulakan?
  • Bolehkah anda memberi saya idea kasar mengenai anggaran anda?
  • Ceritakan lebih banyak mengenai projek anda ...
  • Bagaimana anda mendengar tentang kami?

Bentuk web yang mudah diakses akan kelihatan seperti ini:

form action = ""> fieldset> legenda> Jenis Permintaan: / legenda> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label untuk = "option- satu "> pilihan 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label untuk =" option-two "> pilihan 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label untuk = "option-three"> option 3 / label> br> / fieldset > fieldset> legenda> Garis masa: / legenda> id masukan = "satu bulan" type = "radio" name = "request-timeline" value = "one-month"> label untuk = "satu bulan"> 1 bulan / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label untuk = "satu bulan"> 1-3 bulan / label> br> input id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> label untuk = "four-plus-months"> 4+ bulan / label> br> / fieldset> br> label untuk = "request-budget"> Maklumat Anggaran / label> br> textarea id = "request-budget" name = "request-budget-text" baris = "10" cols = "30"> / textarea> br> label untuk = "request-description"> Penerangan Projek / label> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> label untuk = "request-referensi"> Reference / label> br> textarea id = "request-referensi" name = "request-referensi- text" rows = "10" cols = "30"> / textarea> br > input type = "submit" value = "Kirim"> / form>

Dengan borang web, kami sangat akrab dengan corak tertentu: anda mengklik butang Kirim, semua data borang dihantar ke halaman lain di mana permintaan diproses, dan kemungkinan besar halaman Terima kasih bermunculan.

Dengan chatbots, kami dapat melakukan interaksi dengan mengirimkan permintaan, dan menjadikannya lebih bermakna.

04. Reka suara

Untuk menukar borang ini ke antara muka pengguna perbualan yang disajikan dalam klien web chatbot RiveScript, kita perlu menukar seni bina maklumat dari kaku menjadi lancar; atau label medan ke rentetan UI.

Mari kita pertimbangkan beberapa label medan yang dapat diakses, dan nada pertanyaan yang berkaitan:

  • Permintaan: Bagaimana kita boleh menolong? Tidak pasti? Adakah anda keberatan jika saya mengemukakan beberapa soalan?
  • Garis Masa: Berapa lama kita perlu memulakannya?
  • Maklumat belanjawan: Bolehkah anda memberi saya idea kasar mengenai anggaran anda?
  • Huraian Projek: OK, bolehkah anda memberitahu saya ringkasan masalah yang harus diselesaikan?
  • Rujukan: Juga, siapa yang merujuk anda kepada kami?

Seterusnya kita perlu menukar kod borang web menjadi skrip AI, mengikuti logik pemprosesan RiveScript yang sangat dapat dipelajari untuk perbualan dua hala:

- Bagaimana kita boleh membantu? + *% bagaimana kita dapat membantu - tetapkan area = varSure, Anda keberatan jika saya mengajukan beberapa soalan? + *% pasti anda keberatan jika saya mengajukan beberapa soalan - Berapa lama saya perlu memulakan permintaan ini? + *% berapa lama saya perlu memulakan permintaan ini - tetapkan bila = varBolehkah anda memberi idea kasar mengenai anggaran anda? + *% bolehkah anda memberi saya gambaran kasar mengenai anggaran anda - tetapkan anggaran = varOK, bolehkah anda memberi saya ringkasan mengenai masalah yang harus diselesaikan, komponen dan persekitaran yang terjejas, atau penerangan keseluruhan? + *% ok boleh anda ceritakan ringkasan masalah yang harus diselesaikan komponen dan persekitaran yang terjejas atau penerangan keseluruhan - set project = varJuga, siapa yang merujuk anda kepada kami? + *% juga yang merujuk anda kepada kami - set referal = vargreat inilah yang saya dapat setakat ini: n Perkhidmatan diperlukan: get area> n Perlu bermula: get when> n Anggaran kasar: dapatkan belanjawan> n Mengenai projek anda: dapatkan projek> n Dirujuk oleh: dapatkan rujukan> n dan akan segera menghubungi saya adakah ada perkara lain yang boleh saya bantu hari ini? panggil> pengambilan kawasan pengambilan> get when> get budget> get project> get referal> / call>

05. Permintaan penyerahan

Berbanding dengan pemboleh ubah bentuk standard yang dikirim ke halaman atau perkhidmatan lain untuk diproses, chatbots dapat mengesahkan dan mengirimkan maklumat yang dimasukkan oleh pengguna di jendela sembang (atau diucapkan) dengan segera, yang bermaksud pengguna juga dapat melihat kembali nilai yang dimasukkan sebelumnya dengan mudah.

Kami perlu menghantar permintaan pengguna yang dimasukkan di UI chatbot melalui JSON REST API ke pelayan tugas projek luaran.

Di RiveScript-js kita bebas memanfaatkan Permintaan XMLHttp objek untuk menyerahkan permintaan hampir bersamaan, kerana data dimasukkan oleh pengguna:

> pengambilan objek javascript var http = XMLHttpRequest baru (); var a = rs.getUservar (rs.currentUser (), "kawasan"); var b = rs.getUservar (rs.currentUser (), "when"); var c = rs.getUservar (rs.currentUser (), "belanjawan"); var d = rs.getUservar (rs.currentUser (), "projek"); var e = rs.getUservar (rs.currentUser (), "rujukan"); var url = "http: // localhost: 3000 / send"; var params = "area =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& rujukan =" + e; console.log (params); http.open ("POST", url, benar); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Sambungan", "tutup"); http.onreadystatechange = function () {// Panggil fungsi apabila keadaan berubah. jika (http.readyState == 4 && http.status == 200) {amaran (http.responseText); }} http.send (params); objek

06. Jangan takut pada chatbot

Tidak lama lagi, cara semasa berinteraksi dengan komputer untuk mendapatkan maklumat akan menyerah pada teknologi berasaskan AI seperti chatbots, di mana orang hanya membuat perintah suara yang mudah, seperti yang pernah kita lihat dengan teknologi seperti Amazon Echo dan Google Home.

Komuniti reka bentuk web tidak perlu takut - kita semua harus menggunakan nilai tambah teknologi baru ini.

Ini boleh menjadi penukar permainan untuk syarikat yang dikerjakannya, menawarkan perkhidmatan pelanggan yang dapat ditingkatkan sepenuhnya dan kecerdasan pelanggan yang lebih baik.

Artikel ini pada asalnya dipaparkan dalammajalah bersih, majalah terlaris di dunia untuk pereka dan pembangun web. Langgan di sini.

Menarik
Gambar hari ini: Terungkap oleh Joseph William
Baca

Gambar hari ini: Terungkap oleh Joseph William

eni Komputer: Beritahu kami mengenai projek ... Jo eph William: Ini adalah projek yang dimulakan endiri. aya mahu bermain-main dengan gaya yang ma ih aya jalankan, dan benar-benar mendorongnya ejauh ...
Susun atur! menawarkan aliran kerja drag and drop Bootstrap
Baca

Susun atur! menawarkan aliran kerja drag and drop Bootstrap

u un atur! telah dilancarkan dalam ver i beta, menyediakan cara untuk membangun tata letak dengan Boot trap menggunakan antara muka eret dan lepa .Pencipta ber ama Martn Capeletto, yang juga penga a ...
Astropad 2.0
Baca

Astropad 2.0

A tropad adalah aplika i yang dilak anakan dengan hebat. Apabila digunakan dengan iPad Pro dan tylu Pen il en itif tekanan Apple, ia memberi anda e uatu yang tera a eperti Cintiq. Mudah di ediakan Tia...