peekobot تنزيل - peekobot تنزيل كود المصدر

peekobot

كود الذكاء الاصطناعي

1.0.0

تنزيل

بيكوبوت

Peekobot عبارة عن إطار عمل بسيط لروبوتات الدردشة يعتمد على الاختيار لموقع الويب الخاص بك مكتوبًا في أقل من 100 سطر من ES6 Vanilla JavaScript (وبعض CSS).

يوجد مثال لروبوت يمكنك رؤيته في المجلد /docs .

يوجد أيضًا CodePen الذي يمكنك العبث به.

سمات

تبعيات صغيرة وبسيطة ولا تحتوي على أي تبعيات (إلا إذا كنت بحاجة إلى توافق متصفح قديم)
حدد محادثتك ككائن جافا سكريبت بسيط
المحادثات التي تعتمد على الاختيار/الزر
خيارات للربط بعناوين URL بالإضافة إلى أجزاء أخرى من المحادثة

توافق المتصفح

أستخدم خصائص async/await وCSS المخصصة، لذلك، بشكل عام، لا يتم دعم Internet Explorer وOpera Mini.

يمكنك استخدام Babel أو ما شابه لتحقيق توافق IE11 مع JavaScript.

يمكنك أيضًا تضمين خصائص CSS المخصصة يدويًا إذا كنت تريد ذلك.

الاستخدام

Peekobot ليس حزمة أو مكتبة. لا يمكنك npm install . فكر في الأمر كمجموعة أو إطار عمل. الفكرة هي أن تأخذ نسخة منها وتفعل بها ما تريد.

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

لاستخدام Peekobot، تحتاج إلى:

أضف نصوص وأنماط Peekobot إلى HTML الخاص بك
أضف علامة Peekobot إلى HTML الخاص بك
تحديد محادثتك

1. أضف نصوص وأنماط Peekobot إلى HTML الخاص بك

قم بتنزيل ملفات peekobot.js و peekobot.css في مشروعك.

يمكنك القيام بذلك عن طريق الحصول على الكود الأولي لهذه الملفات من GitHub أو عن طريق استنساخ المشروع.

ثم قم بإضافة البرامج النصية والأنماط Peekobot إلى HTML الخاص بك.

هذه يجب أن تذهب في head :

    <!-- خصائص Peekobot المخصصة (متغيرات CSS) - اضبطها! --><النمط>:الجذر {
            --ارتفاع peekobot: 80vh؛
            --peekobot-avatar: url();
        </style><!-- أنماط Peekobot --><link rel="stylesheet" href="peekobot.css">

لاحظ أنه يمكنك تغيير ارتفاع نافذة chatbot هنا وتحديد عنوان URL "للصورة الرمزية" ليتم استخدامه في الدردشة بواسطة chatbot الخاص بك. يجب أن يكون صغيرًا ومربعًا ويتناسب مع شكل دائري. يتم عرض CSS الخاص بي بمقاس 24 بكسل مربع، لذا يجب أن تكون الصورة بحجم 48 بكسل × 48 بكسل جيدة.

يجب أن تكون هذه العناصر في الجزء السفلي من HTML الخاص بك لتحميل JavaScript:

    <script src="conversation.js"></script><script src="peekobot.js"></script>

2. أضف علامة Peekobot إلى نص HTML الخاص بك

أضف علامة Peekobot إلى نص HTML الخاص بك حيث تريد أن يظهر برنامج chatbot:

    <div id="peekobot-container"><div id="peekobot-inner"><div id="peekobot"></div></div></div>

3. حدد محادثتك

يجب وضع تعريف المحادثة في متغير JavaScript يسمى chat . قمت بتحديد هذا في ملف conversation.js .js. يمكنك تضمينه إذا كنت تريد ذلك.

يجب أن يكون متغير chat كائنًا. في كائن الدردشة:

يجب أن يكون اسم/مفتاح الخاصية الأول هو الرقم 1
يمكن أن تكون أسماء الخصائص اللاحقة أرقامًا أو سلاسل - تتيح لك السلاسل تجميع أجزاء من محادثتك
كل قيمة خاصية هي إدخال في المحادثة.

يجب أن يحتوي إدخال المحادثة على:

خاصية text هي ما يقوله برنامج الدردشة الآلي في هذه المرحلة من المحادثة
أيضاً:

الخاصية next ، التي تحدد إدخال الدردشة التالي من خلال تحديد مفتاح رقمي لكائن الدردشة ويتم استخدامها عندما يحتاج برنامج الدردشة الآلي إلى قول عدة أشياء تباعًا دون إدخال من المستخدم أو
خاصية options التي تحدد الاختيارات التي يمكن للمستخدم اتخاذها. هذه مجموعة من كائنات الخيار.

يجب أن يحتوي كائن الخيارات على:

خاصية text تمثل التسمية لاختيار المستخدم وأيًا كان
الخاصية next التي تحدد إدخال الدردشة التالي عن طريق ذكر مفتاح الخاصية لكائن الدردشة ويتم استخدامها عندما يحدد المستخدم هذا الخيار أو
خاصية url التي تحدد الرابط الذي سيتم نقل المستخدم إليه

مثال بسيط لكائن الدردشة هو:

 const chat = {1: {text: 'صباح الخير سيدي',next: 'question1'},question1: {text: 'هل ترغب في تناول الشاي أو القهوة مع فطورك؟',options: [{text: 'Tea', next: 'response1'},{text: 'Coffee',next: 'response2'}]},response1: {text: 'رائع - مشروب جيد إذا فعلت ذلك أقول ذلك بنفسي.'},response2: {text: 'كما تريد يا سيدي'}}

تأكد من UTF-8

لاستخدام الرموز التعبيرية والأحرف الموسعة الأخرى، من الجيد التأكد من تحديد UTF-8.

من المحتمل أنك تقوم بذلك على أي حال، أو ربما يقوم خادم الويب أو نظام إدارة المحتوى (CMS) الخاص بك بذلك نيابةً عنك. ولكن إذا لم يكن الأمر كذلك، فمن المفيد التأكد من أن لديك العلامة meta الصحيحة في <head> الخاص بك:

 <ميتا محارف = "utf-8">

إخلاء المسؤولية

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

إمكانية الوصول: لم ألقي نظرة حقًا على إمكانية الوصول إلى هذا الرمز. ربما يحتاج إلى بعض العمل
الأمان - من الممكن تمامًا أن تتمكن بعض البرامج النصية من الاستيلاء على كود البرنامج النصي الخاص بالروبوت.

اسمحوا لي أن أعرف إذا كانت لديك أفكار حول كيفية إصلاح هذه الأشياء عن طريق إثارة مشكلة.