نحوه ساخت رابط چت بات

محتوا

• 01. شخصیت تعیین کنید
• 02. از RiveScript استفاده کنید
• 03. مغز ربات خود را ایجاد کنید
• 04. طراحی صدا
• 05. درخواست تسلیم
• 06. از چت بات نترسید

در اواسط دهه 2000 ، نمایندگان مجازی و ربات های گفتگوی خدمات مشتری مورد تحسین بسیاری قرار گرفتند ، هرچند که چندان محاوره ای نبودند و فقط از تبادل داده با سرورهای وب تشکیل شده بودند.

امروزه ، حتی اگر تعداد زیادی از نمونه های "AI ضعیف" وجود داشته باشد (از جمله Siri ، Alexa ، موتورهای جستجوی وب ، مترجمان خودکار و تشخیص چهره) و سایر موضوعات مانند طراحی وب پاسخگو مورد توجه مردم قرار می گیرد ، چت بات ها هنوز هم باعث ایجاد سر و صدا می شوند . با سرمایه گذاری عمده شرکت های بزرگ ، فرصت های زیادی برای هک کردن رابط های گفتگوی آینده باقی مانده است.

• چگونه می توان تجربه چت بات را طراحی کرد

بعضی اوقات شهرت بدی پیدا می کنند ، اما چت بات ها می توانند مفید باشند. نیازی نیست که احساس کنند جایگزینی اساسی برای یک فرم استاندارد وب هستند ، جایی که کاربر قسمتهای ورودی را پر می کند و منتظر تأیید می ماند - آنها می توانند یک تجربه مکالمه را ارائه دهند.

اساساً ما در حال افزایش تجربه کاربری هستیم تا به جای کلیک و اشاره و اشاره های مرورگر وب ، به صورت طبیعی ، مانند مکالمه با یک متخصص یا دوست ، احساس طبیعی تری داشته باشیم. هدف این است که با ارائه پاسخ های همدلانه و متنی ، این فناوری مستقیماً در زندگی مردم جای گیرد.

برای کشف روشی عملی برای طراحی و ساخت چت بات ، براساس یک برنامه واقعی دریافت پروژه در یک روش طراحی سرویس ، فیلم زیر را تماشا کنید یا در ادامه بخوانید.

01. شخصیت تعیین کنید

از آنجا که این روش برای بیش از 110،000 عضو در سطح جهان خدمت می کند ، هدف ارائه یک رابط سریع ، راحت و طبیعی بود که از طریق آن ذینفعان داخلی می توانند به جای پر کردن فرم های گیج کننده ، از خدمات دیجیتالی موثر استفاده کنند.

اولین قدم ایجاد شخصیت چت بات بود ، زیرا این صدای تیم طراحی خدمات را برای ذینفعان خود نشان می داد. ما بر اساس کارهای اصلی آرون والتر در زمینه طراحی شخصیت ها کار کردیم. این به تیم ما کمک کرد تا ویژگی های شخصیتی ربات را توسعه دهد ، و سپس پیام های مربوط به تبریک ، خطا و بازخورد کاربر را تعیین می کند.

این یک مرحله ظریف است ، زیرا بر نحوه درک سازمان تأثیر می گذارد. برای اطمینان از اینکه هرچه بیشتر اطلاعات داریم ، بلافاصله کارگاه های ذینفعان را راه اندازی کردیم تا شخصیت ، رنگ ، تایپوگرافی ، تصاویر و جریان مناسب کاربر را هنگام تعامل با ربات ناخن بزنیم.

پس از به دست آوردن کلیه تأییدیه های لازم - از جمله جستجوی مشاور حقوقی - تصمیم گرفتیم فرم های درخواست باستانی را به مجموعه ای از سوالات متناوب تبدیل کنیم که از مکالمه بین ذینفعان و نماینده تیم خدمات طراحی ما تقلید می کند.

02. از RiveScript استفاده کنید

ما می دانستیم که نمی خواهیم برای بخش پردازش خیلی به زبان نشانه گذاری هوش مصنوعی وارد شویم - ما فقط به اندازه کافی نیاز داشتیم تا تجربه را شروع کنیم.

RiveScript یک API ساده بات بات است که به راحتی قابل یادگیری است و برای نیازهای ما کافی است. طی چند روز منطق ما این بود که یک درخواست پروژه را از ربات دریافت کنیم و آن را با منطق تجاری کافی برای تأیید و طبقه بندی آن تجزیه و تحلیل کنیم تا بتواند آن را از طریق خدمات JSON REST به صف وظیفه داخلی مناسب پروژه ارسال کند.

برای کار با این chatbot اساسی ، به repo RiveScript بروید ، آن را شبیه سازی کنید و تمام وابستگی های استاندارد گره را نصب کنید. در repo همچنین می توانید طعم تعاملات را که می توانید با نمونه های مختلف مثال اضافه کنید ، بدست آورید.

در مرحله بعد ، پوشه سرویس گیرنده وب را اجرا کنید ، که با اجرای یک سرور اصلی Grunt ربات را به یک صفحه وب تبدیل می کند. در این مرحله می توانید تجربه را متناسب با نیازهای خود ارتقا دهید.

03. مغز ربات خود را ایجاد کنید

مرحله بعدی تولید "مغز" ربات ما است. این در پرونده های با پسوند .RIVE مشخص شده است ، و خوشبختانه RiveScript از قبل با تعاملات اساسی خارج از جعبه همراه است (به عنوان مثال ، س questionsالاتی مانند "نام شما چیست؟" ، "چند ساله هستید" و "شما چند سال است) رنگ مورد علاقه؟').

هنگامی که با استفاده از دستور Node مناسب برنامه وب سرویس گیرنده را شروع می کنید ، به فایل HTML دستور داده می شود تا این موارد را بارگیری کندرانندگی کنید فایل ها.

در مرحله بعدی ما باید بخشی از مغز chatbot خود را که با درخواستهای پروژه سرو کار دارد ، تولید کنیم. هدف اصلی ما این است که مجموعه ای از سوالات دریافت وظایف پروژه را به یک مکالمه منظم تبدیل کنیم.

بنابراین ، به عنوان مثال:

• سلام ، چطور می توانیم کمک کنیم؟
• عالی ، چقدر زود باید شروع کنیم؟
• آیا می توانید در مورد بودجه خود ایده ای تقریبی به من بدهید؟
• درباره پروژه خود بیشتر بگویید ...
• چگونه با ما آشنا شدید؟

یک فرم وب قابل دسترسی معمولی مانند این است:

form action = ""> fieldset> legend> نوع درخواست: / legend> input id = "option-one" type = "radio" name = "درخواست نوع" value = "option-one"> برچسب = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" درخواست نوع "value =" option-two "> label for =" option-two "> گزینه 2 / label> br> input id = "option-three" type = "radio" name = "درخواست نوع" value = "option-three"> label for = "option-three"> گزینه 3 / label> br> / fieldset > fieldset> legend> جدول زمانی: / legend> input id = "یک ماه" type = "radio" name = "درخواست-جدول زمانی" value = "یک ماه"> برچسب برای = "یک ماه"> 1 ماه / label> br> input id = "one-three-month" type = "radio" name = "request- timeline" value = "one-three-meha"> label for = "one-month"> 1-3 ماه / label> br> input id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> برچسب for = "Four-plus-months"> 4+ ماه / label> br> / fieldset> br> label for = "درخواست-بودجه"> اطلاعات بودجه / برچسب> br> textarea id = "درخواست-بودجه" name = "درخواست-بودجه-متن" rows = "10" cols = "30"> / textarea> br> label for = "request-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 = "درخواست-مرجع" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > نوع ورودی = "ارسال" مقدار = "ارسال"> / فرم>

با استفاده از فرم های وب ، ما با الگوهای خاصی بسیار آشنا هستیم: شما بر روی دکمه ارسال کلیک می کنید ، تمام داده های فرم به صفحه دیگری ارسال می شود که درخواست پردازش می شود و سپس به احتمال زیاد یک صفحه متشکرانه متشکرانه ظاهر می شود.

با استفاده از ربات های چت ، ما می توانیم تعامل ارائه یک درخواست را بیشتر کنیم و آن را معنادار کنیم.

04. طراحی صدا

برای تبدیل این فرم به یک رابط کاربری مکالمه که در سرویس گیرنده وب chatbot RiveScript ارائه می شود ، باید معماری اطلاعات را از سخت به سیال تبدیل کنیم. یا رشته ها را در رشته های UI قرار دهید.

بیایید برخی از برچسب های زمینه قابل دسترسی و لحن سوال مربوط به آنها را در نظر بگیریم:

• درخواست: چطور میتوانیم کمک کنیم؟ مطمئن نیستم؟ آیا اگر چند س askال بپرسم مشکلی دارید؟
• جدول زمانی: چه زود باید شروع کنیم؟
• اطلاعات بودجه: آیا می توانید در مورد بودجه خود ایده ای تقریبی به من بدهید؟
• شرح پروژه: خوب ، می توانید خلاصه ای از مشکل را برای حل بگویید؟
• ارجاع: همچنین ، چه کسی شما را به ما ارجاع داده است؟

در مرحله بعدی ما باید کد فرم وب را به اسکریپت AI تبدیل کنیم ، به دنبال منطق پردازشی بسیار قابل یادگیری RiveScript برای مکالمات دو طرفه:

- چطور میتوانیم کمک کنیم؟ + *٪ چگونه می توانیم کمک کنیم - تنظیم مناطق = varSure ، آیا اگر دو س questionsال بپرسم ، مخالف هستید؟ + *٪ مطمئنید اگر چند سوال بپرسم - چقدر زود نیاز به شروع این درخواست دارم؟ + *٪ چقدر زود می خواهم این درخواست را شروع کنم - تنظیم کنید وقتی = var آیا می توانید ایده تقریبی بودجه خود را به من بدهید؟ + *٪ آیا می توانید در مورد بودجه خود به من ایده تقریبی بدهید - تنظیم بودجه = varOK ، آیا می توانید خلاصه ای از مشکل را که باید حل شود ، اجزا and و محیط تحت تأثیر قرار دهید ، یا یک توضیح کلی؟ + *٪ ok آیا می توانید خلاصه ای از مشکل برای حل اجزای سازگار و محیط تحت تأثیر یا توضیحات کلی را به من بگویید - set project = varAlso ، چه کسی شما را به ما ارجاع داده است؟ + *٪ کسانی که شما را به ما ارجاع دادند - تنظیم کنید referal = vargreat در اینجا چیزی است که من تاکنون دریافت کردم: n خدمات مورد نیاز: مناطق را دریافت کنید n لازم است شروع کنید: دریافت کنید> n بودجه خشن: بودجه دریافت کنید درباره پروژه شما: دریافت پروژه> n ارجاع شده توسط: دریافت ارجاع> n و به زودی تماس گرفته می شود آیا چیز دیگری وجود دارد که امروز بتوانم به شما کمک کنم؟ تماس بگیرید> مناطق دریافت ورودی> زمان دریافت> بودجه را دریافت کنید> پروژه را دریافت کنید> مراجعه کنید> / تماس بگیرید>

05. درخواست تسلیم

برخلاف متغیرهای فرم استاندارد که برای پردازش به صفحه یا سرویس دیگری ارسال می شوند ، چت بات ها می توانند اطلاعات وارد شده توسط کاربر را در یک پنجره چت (یا گفتاری) فوراً تأیید و ارسال کنند ، این بدان معناست که کاربران همچنین می توانند مقادیر قبلاً وارد شده را به راحتی مرور کنند.

ما باید درخواست کاربر را که از طریق JSON REST API در رابط کاربری Chatbot وارد شده است ، به یک سرور وظیفه پروژه خارجی ارسال کنیم.

در RiveScript-js ما آزادیم که از an استفاده کنیم XMLHttpRequest تقریباً همزمان درخواست را ارسال کنید ، زیرا داده توسط کاربر وارد می شود:

> شی intake مصرف جاوا اسکریپت var http = 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 () ، "referal") ؛ var url = "http: // localhost: 3000 / ارسال"؛ var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e؛ console.log (params) ؛ http.open ("ارسال" ، آدرس اینترنتی ، درست) 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. از چت بات نترسید

به زودی ، روش های فعلی تعامل با رایانه ها برای به دست آوردن اطلاعات ، به فناوری مبتنی بر هوش مصنوعی مانند chatbots ، که در آن افراد فقط دستورات صوتی ساده را ایجاد می کنند ، مانند آنچه که ما با فناوری مانند Amazon Echo و Google Home دیده ایم ، تسلیم می شود.

جامعه طراحی وب نیازی به ترس ندارد - همه ما باید ارزش افزوده این فناوری جدید را بپذیریم.

این می تواند برای شرکت هایی که در آنها کار می کند ، یک تغییر دهنده بازی باشد ، ارائه خدمات کاملاً گسترده به مشتری و بهبود هوش مشتری.

این مقاله در ابتدا در نمایش داده شدمجله نت، پرفروش ترین مجله جهان برای طراحان و توسعه دهندگان وب. مشترک شدن در اینجا.