ألفا

صمم برنامج الدردشة الآلي الخاص بك (القابل للتخصيص بالكامل) على الويب

تحقق من العرض التجريبي المباشر لدينا

التنفيذ الواقعي كمساعد مبيعات افتراضي في Icalia Labs هنا

ألفا عبارة عن روبوت، أو بالأحرى قاعدة لصياغة برنامج الدردشة الآلي الخاص بك على شبكة الإنترنت. لقد بدأنا هذا المشروع لأننا نعتقد أن روبوتات الدردشة يمكن أن تكون مفيدة للغاية وممتعة للغاية، ولكن الوضع الحالي يجعل معظم روبوتات الدردشة تقتصر على منصات المراسلة الحالية مثل Facebook، وهو أمر جيد تمامًا، ولكن ماذا لو كنت تريد أن يعيش روبوتك في مكان آخر على الويب ؟

يمكنك إنشاء الروبوت الخاص بك وتحديد الأنماط والقواعد المرئية الخاصة بك بالإضافة إلى التحكم غير المحدود في التخصيص والمنطق . توجد بالفعل حلول مختلفة، لكنها قد تكون محدودة ومكلفة ويصعب تنفيذها.

هذا هو المكان الذي يأتي فيه ألفا في متناول يدي. تم تصميم هذه المكتبة لتمكنك من إنشاء الروبوت الخاص بك بطريقة بسيطة جدًا. عليك فقط أن:

1. تحميل

2. أدخل شجرة الأسئلة والأجوبة الخاصة بك

3. أدخل الألوان والصور الخاصة بك

يعتني Alpha بعرض واجهة المستخدم بالكامل والتعامل مع حالة التطبيق . لا تحتاج حقًا إلى معرفة أي React (أو Javascript في هذا الشأن). ومع ذلك، إذا كنت تعرف طريقك نحو React وRedux، فيمكنك تخصيص عرض تطبيق الروبوت بشكل أكبر، وحتى توصيله بأي محرك خلفي أو محرك ذكاء اصطناعي من اختيارك.

جدول المحتويات

1. تثبيت

2. تخصيص الحوار

3. تقديم التوصيات

4. تخصيص واجهة المستخدم

5. تخصيص تطبيق React

6. إرسال رسائل البريد الإلكتروني (سيتم تحديده لاحقًا)

7. الاتصال بأي نهاية خلفية (TBD)

8. الاتصال بمحركات الذكاء الاصطناعي (سيتم تحديده لاحقًا)

تثبيت

تم تصميم Alpha للتشغيل على Docker . ومع ذلك، يمكنك تشغيله محليًا طالما أن لديك NodeJS بالإضافة إلى npm أو الغزل (المفضل!) في نظامك.

تطوير

للتثبيت والتشغيل على جهاز الكمبيوتر الخاص بك، ما عليك سوى تشغيل الأوامر التالية في جهازك الطرفي. ستحتاج إلى تثبيت Docker (انظر أدناه للحصول على الإرشادات بدون عامل الإرساء):

1. استنساخ هذا الريبو: git clone https://github.com/IcaliaLabs/alpha.git

2. انتقل إلى الدليل: cd alpha

3. تثبيت التبعيات: docker-compose run --rm alpha yarn install

4. ثم يمكنك رفع الخادم: docker-compose up alpha

هذا كل شيء! من المفترض أن تشاهد الروبوت التجريبي قيد التشغيل في متصفحك إذا قمت بفتح localhost:3000 * في متصفحك.

بعض النقاط المهمة عند التشغيل في وضع التطوير:

• سيتم تمكين Hot Reloading في تطبيق الروبوت، حتى تتمكن من تجربة فوائد Webpack + React.

• يتم تمكين Redux DevTools افتراضيًا حتى تتمكن من فحص إجراءات التطبيق/تغيرات الحالة في الوقت الفعلي.

• يتم ضبط الوقت بين كل رسالة روبوت على 0 . يهدف هذا إلى تقليل إحباط المطورين عند مراجعة تدفق المحادثة مرارًا وتكرارًا، ومع ذلك يمكنك تغيير هذا السلوك إذا كنت ترغب في ذلك على app/containers/BotContainer/sagas.js .

إنتاج

• Heroku: فقط قم بتشغيل git push heroku master . هذا الروبوت جاهز لـ Heroku!

• Local with Docker: إذا كان بإمكانك تجميع الصورة لمعرفة كيف ستتصرف عند الإنتاج، فسنقوم بتجميع البنية معًا أيضًا. فقط قم بتشغيل:

  docker-compose up release

سيقوم ببناء الصورة ورفع خادم الإنتاج.

بدون دوكر

إذا كنت ترغب في التثبيت والتشغيل بدون Docker، فسيتعين عليك تثبيت جميع التبعيات مباشرة في الدليل الخاص بك:

من أجل التنمية:

1. استنساخ هذا الريبو: git clone https://github.com/IcaliaLabs/alpha.git

2. انتقل إلى الدليل: cd alpha

3. قم بتشغيل npm install أو yarn install لتثبيت التبعيات

4. قم بتشغيل npm start لتشغيل الخادم

5. تفضل بزيارة localhost:3000 في متصفحك

للإنتاج:

• هذا الريبو جاهز لـ Heroku، فقط قم git push heroku master

• إذا قمت لأي سبب من الأسباب بتغيير البرامج النصية الخاصة بـ package.json ، فتأكد من مراعاة هذه الخطوات قبل النشر إلى خادم الإنتاج.

• بالنسبة إلى AWS، يمكنك اتباع نفس الخطوات المذكورة هنا

• بالنسبة لخوادم Azure/Softlayer/الخوادم الأخرى، سيتعين عليك الاتصال بالخادم، وسحب الريبو، وتثبيت التبعيات باستخدام yarn ، ثم تنفيذ npm run build لإنشاء مجلد ./build . أخيرًا يمكنك بدء تشغيل الخادم باستخدام start:prod . وبدلاً من ذلك، ما عليك سوى تشغيل start:production وسيعمل على تنفيذ هذه الخطوات معًا بالتسلسل، بالإضافة إلى الاختبارات.

تخصيص الحوار

كل المنطق وراء ما يقوله الروبوت، بما في ذلك منطق الأسئلة والأجوبة، موجود داخل BotMind الموجود في app/BotMind/ . نطلق على كل روبوت فردي أو إدخال مستخدم اسم الفقاعات لأنه يتم عرضها على هذا النحو في واجهة مستخدم الدردشة.

من أجل تخصيص الحوار، تحتاج فقط إلى فهم وتحرير app/BotMind/_initialBubble.js و app/BotMind/BotMindFlows/index.js .

البوت مايند

الملف الرئيسي لـ BotMind هو BotMind.js ، لكن هذا الملف يعمل فقط كمجمع ومصدر للوظائف الموجودة في _initialBubble.js و_ nextBubble.js و_ recommendationBubbles.js . تنفذ هذه الملفات الثلاثة بدورها منطقها استنادًا إلى أشجار الأسئلة والأجوبة الموجودة داخل app/BotMind/BotMindFlows/ .

_initialBubble.js

هنا يمكنك تحديد النقطة التي يبدأ عندها برنامج الروبوت الخاص بك في شجرة المحادثة عند التهيئة أو عندما يختار المستخدم إعادة تشغيل المحادثة.

_nextBubble.js

يحتوي هذا الملف على منطق الفقاعة أو الحوار الذي يجب أن ينتقل إليه الروبوت بناءً على الرسالة الأخيرة من الروبوت أو من المستخدم. لا تحتاج حقًا إلى تغيير هذا الملف، إلا إذا كنت ترغب في إجراء تخصيص أكثر دقة. المضي قدما على مسؤوليتك الخاصة.

_recommendationBubbles.js

ينفذ هذا الملف منطق اختيار المسار عندما يتم تمرير shouldEstimateRecommendation: true في فقاعة حوار. يعمل هذا الملف بناء على النقاط التي جمعها نظام الحقائب أثناء المحادثة. لا تحتاج حقًا إلى تغيير هذا الملف، إلا إذا كنت ترغب في إجراء تخصيص أكثر دقة. المضي قدما على مسؤوليتك الخاصة.

تدفقات العقل الآلي

BotMindFlows موجود على app/BotMind/BotMindFlows/ . افتراضيًا، ستجد هنا ملف index.js فقط، ولكن إذا بدأت شجرة المحادثة الخاصة بك تصبح كبيرة جدًا، فيمكنك إنشاء ملفاتك الخاصة واستخدام ملف index.js لدمجها باستخدام عامل الانتشار مثل هذا.

import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';

const questions = {
	...conversation1,
	...conversation2,
	...conversation3,
}

export default questions;

في كل مرة يقوم BotMind بتحليل المكان الذي يجب أن يذهب إليه (داخل _nextBubble.js ) فإنه يتوقع العثور على مجموعة من الأسئلة داخل app/BotMind/BotMindFlows/index.js . تتكون الأسئلة من... لقد خمنت ذلك، تجزئة السؤال والإجابة الفردية. هنا يمكنك البدء في وضع منطق المحادثة وتدفقها. على سبيل المثال، في العرض التوضيحي الخاص بنا ستجد ما يلي:

 const questions = {start:{botPrompt: "مرحبًا أيها الإنسان، اسمي Alpha، أنا chatbot رائع"،الإجابات: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: "هدفي هو أن أكون روبوت محادثة بسيط يرشد المستخدمين ويتمكن من اتخاذ القرارات وتقديم التوصيات."،الإجابات: [{nextId: "yourName"}]},yourName:{botPrompt: "إذن، ما هو اسمك؟"، الإدخال: textField()، الإجابات: [ {answer: common_greetings,nextId: "greetings_notAName"، }، {answer : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
	...}تصدير الأسئلة الافتراضية؛

يجب أن يكون لكل تجزئة سؤال معرف فريد خاص بها . نوصيك بجعل هذه المعرفات واضحة قدر الإمكان ، حتى لو كان ذلك يعني الكتابة أكثر قليلاً، لأنه مع نمو مكتبة المحادثة الخاصة بالروبوت الخاص بك، فإن تذكر المعرف الذي يفعل ما يمكن أن يصبح أمرًا مؤلمًا في A. تشغل كل علامة تجزئة سؤال الخيارات التالية:

• botPrompt ([سلسلة] مطلوبة): الرسالة من الروبوت

• الإجابات ([المصفوفة] مطلوبة): الاستجابات المختلفة التي قد يكون لدى الروبوت بناءً على ما يجيب عليه المستخدم. تتكون المصفوفة من تجزئات، يمثل كل منها نتيجة محتملة لتدفق المحادثة. تأخذ التجزئة الموجودة داخل [ الإجابات ] الخيارات التالية:

• nextId ([سلسلة] مطلوبة) : يحدد معرف الحوار الذي سينتقل إليه الروبوت في حالة استيفاء هذه الإجابة. في الرسالة الأخيرة من برنامج الروبوت الخاص بك أو قبل الانتقال لتقدير التوصية ( انظر أدناه ) ، يجب عليك تمرير null .

• الإجابة ([String | RegEx]) : إجابة المستخدم التي ستؤدي إلى تشغيل هذا التجزئة. إذا كنت تستخدم selectField أو tagsField لتحديد الإجابات مسبقًا للمستخدم، فلا بأس باستخدام السلاسل، وإلا فقد ترغب في استخدام RegEx (انظر الأمثلة).

• sumToBags ([Array]) : هنا يمكنك البدء في إضافة نقاط إلى نظام الحقائب من أجل إجراء المزيد من عناصر التحكم في التدفق المتقدمة و/أو إصدار توصيات إذا كان هذا هو غرض الروبوت الخاص بك. سيبدو sumToBags عادةً بالشكل التالي: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]

• CatchName ([Boolean]) : سيشير React لتخزين اسم المستخدم من رسالة المستخدمين في حالة التطبيق.

• CatchCompanyName ([Boolean]) : نفس ما ورد أعلاه ولكن لاسم الشركة.

• CatchMail ([Boolean]) : نفس ما ورد أعلاه ولكن بالنسبة لعناوين البريد الإلكتروني.

• CatchPhone ([Boolean]) : نفس ما ورد أعلاه ولكن بالنسبة لأرقام الهواتف.

• يجب أن يكون تقدير التوصية ([منطقي]) : سيشير إلى BotMind لكسر التدفق المنتظم وتحليل أكياس التوصيات من أجل دفع المحادثة إلى الأمام (انظر الأمثلة).

• FinishConversation ([Boolean]) : سيشير إلى الروبوت لإنهاء المحادثة في الحوار التالي. عندما يحدث هذا، سيتم تعطيل إدخال المستخدم وسيصبح الروبوت "غير متصل بالإنترنت" حتى يحدد المستخدم "إعادة التشغيل".

  ملاحظة - إذا كان برنامج botPrompt الخاص بك لجزء الحوار هذا لا يتوقع نتائج، فيمكنك فقط تمرير nextId مثل هذا:

  answers: [
  	{
  		nextId: "hello"
  	}
  ]

• الإدخال ([Object]) : يحدد هذا نوع الإدخال المتاح للمستخدم أثناء مطالبة الروبوت هذه (حقل نصي، علامات، تحديد، معطل، وما إلى ذلك). بشكل افتراضي، تكون المدخلات عبارة عن حقول نصية معطلة. نوصي باستخدام مساعدي StateFormatter المضمنين في بداية ملف index.js .

• اكتب ([سلسلة]) : ما نوع الرسالة التي يرسلها الروبوت ("نص" أو "وسائط" أو "رابط" أو "نص متحول").

• varName ([String]) : إذا اخترت "transformedText" كنوع الإدخال الخاص بك، فيمكنك كتابة @varName في botPrompt ، والذي سيشير إلى هذا الخيار. عندما يعرض الروبوت الرسالة، سيبحث عن المتغير المخزن في حالة React ( انظر أدناه ) ويستبدل @varName بقيمة ذلك المتغير.

تقديم "توصيات" للمستخدمين ( اختر مسار الحوار بناءً على سجل الحوار المتراكم )

كما ذكرنا سابقًا، يمكنك اختيار تخزين بعض القيم في حالة React، ثم حساب التفاعل/التدفق/التوصية لاحقًا بناءً على هذه القيم. نحن نسمي هذا نظام الحقائب.

نظام الحقائب

مفهوم نظام الحقائب هو أننا نحدد مسبقًا بعض " الحقائب " التي يمكننا ملؤها بـ " النقاط " مع تقدم المحادثة. أخيرًا، عندما تقرر استدعاء shouldEstimateRecommendation: true على إحدى تجزئات الأسئلة والأجوبة، سيتم استدعاء _recommendationBubbles.js إلى الإجراء لتحديد ما سيتم عرضه بعد ذلك بناءً على عدد النقاط التي تراكمت في كل حقيبة.

الخطوة الأولى هي تحديد الحقائب التي ستستخدمها على /app/BotMind/recommendationBags.js . إذا لم تحدد هذه الحقائب، فسيعمل الروبوت، لكنه لن يعرف ما يجب فعله عند الاتصال addToBags أو shouldEstimateRecommendation . تبدو الحقائب هكذا:

const recommendationBags = [
	{
		name: "redWine",
		defaultValue: 0,
		goToBubbleId: "redWine_start",
	},
	{
		name: "whiteWine",
		defaultValue: 0,
		goToBubbleId: "whiteWine_start",
	},
	{
		name: "roseWine",
		defaultValue: 0,
		goToBubbleId: "roseWine_start",
	},
]

export default recommendationBags;

بعد ذلك، يمكنك تحديد وقت الإضافة باستخدام addToBags في تدفقات الأسئلة والأجوبة، على سبيل المثال:

question1:{
	botPrompt: "Which of these are you having?",
	input: selectField(["Red Meat", "Sea Food", "Chicken", "Pasta"]),
	answers: [
			...
			{
				answer: "Red Meat",
				nextId: "question2",
				sumToBags:[{name: "redWine", points: 4}, {name: "roseWine", points: 1}]
			},
			...
		]
	}

وعندما تكون جاهزًا، ما عليك سوى الاتصال بـ shouldEstimateRecommendation مثل هذا:

question2:{
	botPrompt: "What will you serve for dessert?",
	input: selectField(["Chocolate", ...]),
	answers: [
		...
		{
			answer: "Chocolate",
			shouldEstimateRecommendation: true,
			nextId: null,
			sumToBags:[{name: "redWine", points: 3}, {name: "whiteWine", points: 1}, {name: "roseWine", points: 2}]
		},
		...
	]
},

في هذا المثال، سيتم استدعاء _recommendationBubbles.js ، وبالتالي من المحتمل أن تكون فقاعة الروبوت التالية هي تلك الموجودة في redWine_start .

تخصيص واجهة المستخدم

لقد حصلنا على الحرية في تحديد واجهة المستخدم مسبقًا لتوفير بعض الوقت.

يتم التحكم في الغالبية العظمى من أنماط الروبوت بواسطة ملف واحد، /app/customization/styleVariables.js ، حيث يمكنك هنا تغيير جميع الألوان المستخدمة تقريبًا لجميع العناصر، بالإضافة إلى خلفية واجهة المستخدم.

إذا كنت ترغب في إجراء المزيد من التغييرات على واجهة المستخدم، فيمكنك البحث مباشرة في ملفات ورقة الأنماط . يوجد ملف عام على /app/global-styles.js وبعض المكونات أو الحاويات لها ملفات styledComponents.js الخاصة بها في المجلدات الخاصة بها لمكونات معيارية معينة. تستخدم هذه الملفات Styled-Components ، وهي مكتبة رائعة جدًا لـ React/ES6 (والتي تعتبر رسميًا بمثابة أداة مساعدة لأفضل الممارسات). تستخدم هذه الملفات القيم الحرفية لقالب Javascript الموسومة لاستكمال متغيرات JS مع CSS، لكن لا تقلق ، يمكن التعامل معها تمامًا مثل CSS/SCSS العادية.

ملاحظة - هدفنا هو الانتقال تدريجيًا إلى المكونات المستقلة والمصممة على شكل وحدات بنسبة 100% مثل تلك الموجودة في /app/components/UserInput/styledComponents.js والتخلص من كل التعليمات البرمجية تقريبًا الموجودة في /app/global-styles.js

إذا لم يتم تلبية رغبات التخصيص الخاصة بك بمجرد التلاعب بـ CSS للمكونات، فيمكنك تخصيص كل شيء آخر تقريبًا حسب رغبتك، ولكن بعد هذه النقطة، سيتعين عليك التعامل مع جانب React (+Redux) من التطبيق ( انظر أدناه ).

تخصيص تطبيق React

تمت إعادة هيكلة جانب React بالكامل من Alpha مع أخذ هذا الريبو الرائع كقاعدة. الاستفادة من أفضل الممارسات الراسخة في React، أي استخدام:

• إعادة إحياء

• ImmutableJS

• إعادة التحديد

• ريدوكس ساغا

• مكونات على غرار

إذا كنت ترغب في التلاعب بجانب React في Alpha، فمن الأفضل أن تلقي نظرة على هذه المستندات أولاً.

إرسال رسائل البريد الإلكتروني (سيتم تحديده لاحقًا)

نحن على يقين من أنك ترغب في إرسال رسائل بريد إلكتروني تلقائية إلى مالك الروبوت والمستخدمين النهائيين تحتوي على ملخص لمحادثتهم أو ما شابه، ونحن نعمل على إيجاد طريقة لتقديم الحل الأكثر مرونة والأكثر حيادًا في الخلفية." ستسمح بـ "التوصيل والتشغيل" فقط تقريبًا.

أفضل رهان لك الآن هو توصيل هذا ببعض خوادم Node أو Express (أو Rails 5.1.x) والاستفادة من حلول البريد الإلكتروني الخاصة بهم. يمكنك إلقاء نظرة على الملف /app/BotMind/BotMailer.js الذي نستخدمه للتنفيذ المستند إلى Rails، ولكن اعتبارًا من الآن قمنا بإزالة كل منطق إرسال البريد الإلكتروني من /app/containers/BotContainer/sagas.js ، لذا عليك أن تكتب ملاحمك الخاصة.

الاتصال بأي نهاية خلفية (TBD)

يعتمد هذا الروبوت على React + Webpack فقط، مما يعني أنه يجب أن تكون قادرًا على توصيله بأي إطار عمل أو واجهة خلفية وما إلى ذلك، طالما أنه يعمل مع Webpack.

في الوقت الحالي، يمكن للروبوت الاتصال بسهولة بأي واجهة برمجة تطبيقات، ولكن سيتعين عليك تدوين منشئي الأحداث والملاحم الخاصة بك للحصول على السلوك المطلوب.

سنضيف الوثائق هنا على طول الطريق بينما نقوم بتكييف هذا الروبوت لتطبيقات مختلفة.

الاتصال بمحركات الذكاء الاصطناعي (سيتم تحديده لاحقًا)

كما هو مذكور أعلاه، نعتزم السماح لهذا الروبوت بالاتصال بمحركات الذكاء الاصطناعي الأخرى مثل Api.ai وWatson من IBM من أجل تعزيز التفاعلات. هذا هو واحد من أهم المهام لدينا.