சாட்போட் இடைமுகத்தை எவ்வாறு உருவாக்குவது

உள்ளடக்கம்

• 01. ஒரு ஆளுமை அமைக்கவும்
• 02. ரைவ்ஸ்கிரிப்ட் பயன்படுத்தவும்
• 03. உங்கள் போட்டின் மூளையை உருவாக்குங்கள்
• 04. ஒரு குரலை வடிவமைக்கவும்
• 05. சமர்ப்பிப்பு கோரிக்கை
• 06. சாட்போட்டுக்கு அஞ்சாதீர்கள்

2000 களின் நடுப்பகுதியில், மெய்நிகர் முகவர்கள் மற்றும் வாடிக்கையாளர் சேவை சாட்போட்கள் அதிக உரையாடலைப் பெறவில்லை என்றாலும், ஏராளமான புகழைப் பெற்றன, மேலும் அவை வலை சேவையகங்களுடனான தரவு பரிமாற்றங்களால் ஆனவை.

இப்போதெல்லாம், 'பலவீனமான AI' இன் ஏராளமான எடுத்துக்காட்டுகள் இருந்தாலும் (சிரி, அலெக்சா, வலைத் தேடுபொறிகள், தானியங்கி மொழிபெயர்ப்பாளர்கள் மற்றும் முக அங்கீகாரம் உட்பட) மற்றும் பதிலளிக்கக்கூடிய வலை வடிவமைப்பு போன்ற பிற தலைப்புகள் வெளிச்சத்தைத் தூண்டுகின்றன, சாட்போட்கள் இன்னும் பரபரப்பை ஏற்படுத்தி வருகின்றன . பெரிய நிறுவனங்களின் பெரிய முதலீட்டில், எதிர்கால உரையாடல் இடைமுகங்களை ஹேக் செய்ய ஏராளமான வாய்ப்புகள் உள்ளன.

• சாட்போட் அனுபவத்தை எவ்வாறு வடிவமைப்பது

சில நேரங்களில் அவை கெட்ட பெயரைப் பெறுகின்றன, ஆனால் சாட்போட்கள் பயனுள்ளதாக இருக்கும். ஒரு நிலையான வலை படிவத்திற்கான அடிப்படை மாற்றாக அவர்கள் உணரத் தேவையில்லை, அங்கு பயனர் உள்ளீட்டு புலங்களில் நிரப்புகிறார் மற்றும் சரிபார்ப்புக்காக காத்திருக்கிறார் - அவர்கள் உரையாடல் அனுபவத்தை வழங்க முடியும்.

இணைய உலாவி புள்ளி மற்றும் கிளிக்குகள் அல்லது மொபைல் சைகைகளுக்குப் பதிலாக, ஒரு நிபுணர் அல்லது நண்பருடன் உரையாடுவது போன்ற, இயல்பானதாக உணர பயனர் அனுபவத்தை மேம்படுத்துகிறோம். பச்சாத்தாபம், சூழ்நிலை சார்ந்த பதில்களை வழங்குவதன் மூலம், இந்த தொழில்நுட்பம் மக்களின் வாழ்க்கையில் நேரடியாக உட்பொதிக்கப்படும் என்பதே இதன் நோக்கம்.

ஒரு சேவை வடிவமைப்பு நடைமுறையில் ஒரு உண்மையான திட்ட-உட்கொள்ளல் பயன்பாட்டின் அடிப்படையில், ஒரு சாட்போட்டை வடிவமைத்து உருவாக்குவதற்கான நடைமுறை வழியைக் கண்டறிய கீழேயுள்ள வீடியோவைப் பாருங்கள் அல்லது படிக்கவும்.

01. ஒரு ஆளுமை அமைக்கவும்

இந்த நடைமுறை உலகளவில் 110,000 உறுப்பினர்களுக்கு சேவை செய்வதால், குழப்பமான படிவங்களை நிரப்புவதற்குப் பதிலாக, உள் பங்குதாரர்கள் பயனுள்ள டிஜிட்டல் சேவைகளைக் கோரக்கூடிய விரைவான, வசதியான மற்றும் இயற்கையான இடைமுகத்தை வழங்குவதே குறிக்கோளாக இருந்தது.

முதல் கட்டம் சாட்போட்டின் ஆளுமையை நிறுவுவதாகும், ஏனெனில் இது சேவை வடிவமைப்புக் குழுவின் குரலை அதன் பங்குதாரர்களுக்கு குறிக்கும். வடிவமைப்பு ஆளுமைகள் குறித்த ஆரோன் வால்டரின் ஆரம்ப வேலைகளில் நாங்கள் கட்டியுள்ளோம். இது போட் ஆளுமைப் பண்புகளை வளர்க்க எங்கள் குழுவுக்கு பெரிதும் உதவியது, பின்னர் வாழ்த்துக்கள், பிழைகள் மற்றும் பயனர் கருத்துக்களுக்கான செய்திகளை தீர்மானித்தது.

இது ஒரு நுட்பமான கட்டமாகும், ஏனெனில் இது அமைப்பு எவ்வாறு உணரப்படுகிறது என்பதைப் பாதிக்கிறது. எங்களிடம் முடிந்தவரை அதிகமான தகவல்கள் இருப்பதை உறுதிசெய்ய, போட் உடன் ஈடுபடும்போது பொருத்தமான ஆளுமை, நிறம், அச்சுக்கலை, படங்கள் மற்றும் பயனரின் ஓட்டம் ஆகியவற்றைக் கட்டுப்படுத்த உடனடியாக பங்குதாரர் பட்டறைகளை அமைத்தோம்.

தேவையான அனைத்து ஒப்புதல்களையும் நாங்கள் பெற்ற பிறகு - சட்ட ஆலோசனையைப் பெறுவது உட்பட - தொன்மையான கோரிக்கை படிவங்களை தொடர்ச்சியான முன்னும் பின்னுமாக கேள்விகளாக மாற்ற நாங்கள் புறப்பட்டோம், இது பங்குதாரர்களுக்கும் எங்கள் வடிவமைப்பு சேவைகள் குழுவின் பிரதிநிதிக்கும் இடையிலான உரையாடலைப் பிரதிபலிக்கிறது.

02. ரைவ்ஸ்கிரிப்ட் பயன்படுத்தவும்

செயலாக்க பகுதிக்கு AI மார்க்அப் மொழியில் அதிகம் ஈடுபட விரும்பவில்லை என்பதை நாங்கள் அறிவோம் - அனுபவத்தைத் தொடங்குவதற்கு எங்களுக்குத் தேவை.

ரைவ்ஸ்கிரிப்ட் ஒரு எளிய சாட்போட் ஏபிஐ ஆகும், இது கற்றுக்கொள்ள போதுமானது மற்றும் எங்கள் தேவைகளுக்கு போதுமானது. சில நாட்களுக்குள், போட்டிலிருந்து ஒரு திட்டக் கோரிக்கையை எடுத்துக்கொள்வதற்கான தர்க்கத்தை நாங்கள் கொண்டிருந்தோம், அதை சரிபார்த்து வகைப்படுத்த போதுமான வணிக தர்க்கத்துடன் அதை அலசினோம், எனவே அதை JSON REST சேவைகள் மூலம் பொருத்தமான உள் திட்ட பணி வரிசையில் அனுப்ப முடியும்.

இந்த அடிப்படை சாட்போட் வேலை செய்ய, ரைவ்ஸ்கிரிப்ட் ரெப்போவுக்குச் சென்று, அதை குளோன் செய்து அனைத்து நிலையான முனை சார்புகளையும் நிறுவவும். ரெப்போவில் நீங்கள் பல்வேறு எடுத்துக்காட்டு துணுக்குகளுடன் சேர்க்கக்கூடிய தொடர்புகளின் சுவைகளையும் பெறலாம்.

அடுத்து, வலை-கிளையன்ட் கோப்புறையை இயக்கவும், இது ஒரு அடிப்படை கிரண்ட் சேவையகத்தை இயக்குவதன் மூலம் போட்டை வலைப்பக்கமாக மாற்றுகிறது. இந்த நேரத்தில் உங்கள் தேவைகளுக்கு ஏற்ப அனுபவத்தை மேம்படுத்தலாம்.

03. உங்கள் போட்டின் மூளையை உருவாக்குங்கள்

அடுத்த கட்டம் எங்கள் போட்டின் ‘மூளையை’ உருவாக்குவது. இது .RIVE நீட்டிப்பு கொண்ட கோப்புகளில் குறிப்பிடப்பட்டுள்ளது, மேலும் நன்றியுடன் ரைவ்ஸ்கிரிப்ட் ஏற்கனவே பெட்டியின் வெளியே அடிப்படை தொடர்புகளுடன் வருகிறது (எடுத்துக்காட்டாக, 'உங்கள் பெயர் என்ன?', 'உங்கள் வயது எவ்வளவு?' மற்றும் 'உங்கள் என்ன? விருப்பமான நிறம்?').

சரியான முனை கட்டளையைப் பயன்படுத்தி வலை-கிளையன்ட் பயன்பாட்டைத் தொடங்கும்போது, ​​HTML கோப்பு இவற்றை ஏற்ற அறிவுறுத்தப்படுகிறது.RIVE கோப்புகள்.

அடுத்து திட்டக் கோரிக்கைகளைச் சமாளிக்கும் எங்கள் சாட்போட்டின் மூளையின் பகுதியை உருவாக்க வேண்டும். எங்கள் முக்கிய குறிக்கோள், திட்டப்பணி உட்கொள்ளும் கேள்விகளின் தேர்வை வழக்கமான உரையாடலாக மாற்றுவதாகும்.

எனவே, எடுத்துக்காட்டாக:

• வணக்கம், நாங்கள் எவ்வாறு உதவ முடியும்?
• பெரியது, எவ்வளவு விரைவில் தொடங்க வேண்டும்?
• உங்கள் பட்ஜெட்டைப் பற்றி ஒரு தோராயமான யோசனையை எனக்குத் தர முடியுமா?
• உங்கள் திட்டத்தைப் பற்றி மேலும் சொல்லுங்கள் ...
• எங்களைப் பற்றி நீங்கள் எப்படிக் கேட்டீர்கள்?

அணுகக்கூடிய பொதுவான வலை வடிவம் இதுபோல் இருக்கும்:

form action = ""> fieldset> புராணக்கதை> கோரிக்கை வகை: / புராணக்கதை> உள்ளீடு ஐடி = "விருப்பம்-ஒன்று" வகை = "வானொலி" பெயர் = "கோரிக்கை-வகை" மதிப்பு = "விருப்பம்-ஒன்று"> லேபிள் = "விருப்பம்- ஒன்று "> விருப்பம் 1 / லேபிள்> br> உள்ளீட்டு ஐடி =" விருப்பம்-இரண்டு "வகை =" வானொலி "பெயர் =" கோரிக்கை-வகை "மதிப்பு =" விருப்பம்-இரண்டு "> லேபிள் =" விருப்பம்-இரண்டு "> விருப்பம் 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> = "option-three"> விருப்பம் 3 / label> br> / fieldset க்கான லேபிள் > புலங்கள்> புராணக்கதை> காலவரிசை: / புராணக்கதை> உள்ளீட்டு ஐடி = "ஒரு மாதம்" வகை = "வானொலி" பெயர் = "கோரிக்கை-காலவரிசை" மதிப்பு = "ஒரு மாதம்"> = "ஒரு மாதம்"> 1 மாதம் / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> = "one-month"> 1-3 months / label> br> உள்ளீட்டு ஐடி = "நான்கு-பிளஸ்-மாதங்கள்" வகை = "ரேடியோ" பெயர் = "கோரிக்கை- காலவரிசை" மதிப்பு = "நான்கு-பிளஸ்-மாதங்கள்"> = "நான்கு-பிளஸ்-மாதங்கள்"> 4+ மாதங்களுக்கான லேபிள் / label> br> / fieldset> br> label for = "request-budget"> பட்ஜெட் தகவல் / லேபிள்> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> திட்ட விளக்கம் / லேபிள்> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> லேபிள் = "கோரிக்கை-குறிப்பு"> குறிப்பு / லேபிள்> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > உள்ளீட்டு வகை = "சமர்ப்பி" மதிப்பு = "சமர்ப்பி"> / படிவம்>

வலை படிவங்களுடன், சில வடிவங்களை நாங்கள் நன்கு அறிந்திருக்கிறோம்: நீங்கள் சமர்ப்பி பொத்தானைக் கிளிக் செய்க, எல்லா படிவத் தரவும் கோரிக்கை செயலாக்கப்பட்ட மற்றொரு பக்கத்திற்கு அனுப்பப்படும், பின்னர் பெரும்பாலும் ஒரு கன்னமான நன்றி பக்கம் மேல்தோன்றும்.

சாட்போட்களைக் கொண்டு, ஒரு கோரிக்கையைச் சமர்ப்பிப்பதற்கான தொடர்புகளை எங்களால் எடுக்க முடியும், மேலும் அதை மேலும் அர்த்தமுள்ளதாக்குவோம்.

04. ஒரு குரலை வடிவமைக்கவும்

இந்த படிவத்தை ரைவ்ஸ்கிரிப்ட்டின் சாட்போட் வலை கிளையண்டில் வழங்கப்பட்ட உரையாடல் பயனர் இடைமுகமாக மாற்ற, தகவல் கட்டமைப்பை கடுமையானதாக இருந்து திரவமாக மாற்ற வேண்டும்; அல்லது UI சரங்களில் புல லேபிள்கள்.

அணுகக்கூடிய சில புல லேபிள்களையும் அவற்றுடன் தொடர்புடைய கேள்விக்குறியையும் கருத்தில் கொள்வோம்:

• கோரிக்கை: நாங்கள் உங்களுக்கு எப்படி உதவ முடியும்? நிச்சயமாக தெரியவில்லையா? நான் சில கேள்விகளைக் கேட்டால் நீங்கள் கவலைப்படுகிறீர்களா?
• காலவரிசை: எவ்வளவு விரைவில் தொடங்க வேண்டும்?
• பட்ஜெட் தகவல்: உங்கள் பட்ஜெட்டைப் பற்றி ஒரு தோராயமான யோசனையை எனக்குத் தர முடியுமா?
• திட்ட விளக்கம்: சரி, தீர்க்கப்பட வேண்டிய பிரச்சினையின் சுருக்கத்தை என்னிடம் சொல்ல முடியுமா?
• குறிப்பு: மேலும், உங்களை எங்களிடம் குறிப்பிட்டவர் யார்?

அடுத்து, இருவழி உரையாடல்களுக்கு ரைவ்ஸ்கிரிப்ட் மிகவும் கற்றுக்கொள்ளக்கூடிய செயலாக்க தர்க்கத்தைப் பின்பற்றி, வலை படிவத்தின் குறியீட்டை AI ஸ்கிரிப்டாக மாற்ற வேண்டும்:

- நாங்கள் உங்களுக்கு எப்படி உதவ முடியும்? + *% நாங்கள் எவ்வாறு உதவ முடியும் - பகுதிகளை அமைக்கவும் = varSure, நான் இரண்டு கேள்விகளைக் கேட்டால் நீங்கள் கவலைப்படுகிறீர்களா? + *% நான் இரண்டு கேள்விகளைக் கேட்டால் நீங்கள் கவலைப்படுகிறீர்களா - இந்த கோரிக்கையை எவ்வளவு விரைவில் தொடங்க வேண்டும்? + *% இந்த கோரிக்கையை நான் எவ்வளவு விரைவில் தொடங்க வேண்டும் - உங்கள் வரவு செலவுத் திட்டத்தைப் பற்றி தோராயமாக யோசிக்கும்போது = varCan ஐ அமைக்கவும்? + *% உங்கள் பட்ஜெட்டைப் பற்றிய தோராயமான யோசனையை எனக்குத் தர முடியுமா - பட்ஜெட் = varOK ஐ அமைக்கவும், தீர்க்கப்பட வேண்டிய சிக்கலின் சுருக்கம், கூறுகள் மற்றும் சூழல்கள் பாதிக்கப்பட்டுள்ளதா அல்லது ஒட்டுமொத்த விளக்கத்தை என்னிடம் சொல்ல முடியுமா? + *% சரி, தீர்க்கப்பட வேண்டிய கூறுகள் மற்றும் சூழல்கள் தீர்க்கப்பட வேண்டிய சிக்கலின் சுருக்கத்தை அல்லது ஒட்டுமொத்த விளக்கத்தை என்னிடம் சொல்ல முடியுமா - தொகுப்பு திட்டம் = varAlso, உங்களை எங்களிடம் குறிப்பிட்டவர் யார்? + *% உங்களை எங்களிடம் குறிப்பிட்டவர் - ரெஃபரல் = வர்கிரேட் இங்கே அமைக்கப்பட்டவை: n தேவைப்படும் சேவைகள்: பகுதிகளைப் பெறுங்கள்> start n தொடங்க வேண்டும்: எப்போது கிடைக்கும்> n கடினமான பட்ஜெட்: பட்ஜெட்டைப் பெறுங்கள்> n உங்கள் திட்டத்தைப் பற்றி: திட்டத்தைப் பெறுங்கள்> by n குறிப்பிடப்பட்டவர்: பரிந்துரைகளைப் பெறுங்கள்> n விரைவில் தொடர்பு கொள்வேன், இன்று நான் உங்களுக்கு உதவக்கூடிய வேறு ஏதாவது இருக்கிறதா? அழைப்பு> உட்கொள்ளும் பகுதிகள்> வரும்போது> பட்ஜெட்டைப் பெறுங்கள்> திட்டத்தைப் பெறுங்கள்> பரிந்துரைகளைப் பெறுங்கள்> / அழைப்பு>

05. சமர்ப்பிப்பு கோரிக்கை

செயலாக்க நிலையான படிவ மாறிகள் வேறொரு பக்கம் அல்லது சேவைக்கு அனுப்பப்படுவதற்கு மாறாக, அரட்டை சாளரத்தில் (அல்லது பேசப்படும்) பயனரால் உள்ளிடப்பட்ட தகவல்களை உடனடியாக அரட்டை மற்றும் சரிபார்க்க முடியும், அதாவது பயனர்கள் முன்பு உள்ளிட்ட மதிப்புகளை எளிதாக மறுபரிசீலனை செய்யலாம்.

சாட்போட் UI இல் உள்ளிடப்பட்ட பயனரின் கோரிக்கையை JSON REST API வழியாக வெளிப்புற திட்ட பணி சேவையகத்திற்கு அனுப்ப வேண்டியிருந்தது.

RiveScript-js இல் நாம் பயன்படுத்த இலவசம் XMLHttpRequest பயனரால் தரவு உள்ளிடப்பட்டதால், கோரிக்கையை கிட்டத்தட்ட ஒரே நேரத்தில் சமர்ப்பிக்க பொருள்:

> பொருள் உட்கொள்ளல் ஜாவாஸ்கிரிப்ட் 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 (), "project"); var e = rs.getUservar (rs.currentUser (), "பரிந்துரை"); var url = "http: // localhost: 3000 / send"; var params = "areass =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& refral =" + e; console.log (params); http.open ("POST", url, உண்மை); http.setRequestHeader ("உள்ளடக்க வகை", "பயன்பாடு / x- www-form-urlencoded"); http.setRequestHeader ("இணைப்பு", "மூடு"); http.onreadystatechange = function () {// நிலை மாறும்போது ஒரு செயல்பாட்டை அழைக்கவும். if (http.readyState == 4 && http.status == 200) {எச்சரிக்கை (http.responseText); }} http.send (அளவுருக்கள்); பொருள்

06. சாட்போட்டுக்கு அஞ்சாதீர்கள்

விரைவில், தகவல்களைப் பெறுவதற்கான கணினிகளுடன் தொடர்புகொள்வதற்கான தற்போதைய வழிகள், சாட்போட்கள் போன்ற AI- அடிப்படையிலான தொழில்நுட்பத்தை வழங்கும், அமேசான் எக்கோ மற்றும் கூகிள் ஹோம் போன்ற தொழில்நுட்பத்துடன் நாம் பார்த்ததைப் போல, மக்கள் எளிய குரல் கட்டளைகளை உருவாக்குகிறார்கள்.

வலை வடிவமைப்பு சமூகம் பயப்பட தேவையில்லை - இந்த புதிய தொழில்நுட்பத்தின் கூடுதல் மதிப்பை நாம் அனைவரும் ஏற்றுக்கொள்ள வேண்டும்.

இது பணிபுரியும் நிறுவனங்களுக்கு ஒரு விளையாட்டு மாற்றியாக இருக்கலாம், முழுமையாக அளவிடக்கூடிய வாடிக்கையாளர் சேவையையும் மேம்பட்ட வாடிக்கையாளர் நுண்ணறிவையும் வழங்குகிறது.

இந்த கட்டுரை முதலில் இடம்பெற்றதுநிகர இதழ், வலை வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்களுக்காக உலகின் சிறந்த விற்பனையான பத்திரிகை. இங்கே குழுசேரவும்.