المعاينة الأساسية للمساعد الظاهري على https://robinjs.party.

كيفية كتابة استنساخ اليكسا وحدات في 40 خطوط من جافا سكريبت

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

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

تحديث: ليس من الضروري استخدام إطار عمل مثل preact ، ومع ذلك ، فقد اخترت القيام بذلك حتى لا أضطر إلى إعداد مشروع أو محزم أو بابل يدويًا. لا يوجد سبب لديك لاستخدام preact. إذا كنت لا ترغب في استخدامه ، فقم فقط بتخطي الفقرة التالية ثم انتقل إلى "إنشاء قلب المساعد". شكرا على ملاحظاتك!

إنشاء تطبيق preact جديد

لنقم بإعداد تطبيق preact الأساسي باستخدام الأمر create-preact-app. هذا يجعل من الممكن بناء تطبيق جديد سريع للغاية.

إنشاء مشروع preact جديد مع التطبيق إنشاء preact.

سننشئ ملفًا جديدًا في المجلد المصدر يُسمى assistant.js ، جنبًا إلى جنب مع دليل جديد يُسمى المهارات التي سوف نستخدمها لوضع مهاراتنا فيها. يمكنك العثور على كل رمز هذه المقالة في مستودع موقع robinjs-website.

اصنع قلب المساعد

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

الفصل الأساسي لمساعدنا (assistant.js).

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

العملية الأساسية ونقول وظائف مساعدنا (assistant.js).

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

خلق بعض المهارات

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

في هذا المثال ، سأجعل وظيفة المشغل متزامنة بينما تكون وظيفة العزم متزامنة. قد يختار المرء جعل وظيفة المشغل غير متزامنة أيضًا ، ومع ذلك ، لن نستخدم هذا النوع من المشغلات في الوقت الحالي.

لنقم بإنشاء مجلد مهارات يحتوي على ملفين - time.js و whatsup.js. سيتم استخدام هاتين المهارات الأساسية لمساعدنا.

اثنين من المهارات الأساسية التي سوف نستخدمها في مساعدنا (مجلد المهارات).

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

تنفيذ وظيفة العملية (assistant.js).

تهانينا! لقد أنهيت قلب مساعدك الافتراضي (القائم على النص). يمكنك الآن استخدام الكود أعلاه لإنشاء مثيل جديد وتحميل مهاراتك.

الاستخدام الأساسي للإصدار المستند إلى النص من المساعد (index.js).

الاستماع والتحدث

الوقت للجزء الأخير من تنفيذ المساعد الظاهري. هذا هو المكان الذي نجعل فيه المساعد يتحدث إجاباته لنا ويستمع إلى ما نقوله. لنبدأ بالجزء السهل ، تحويل النص إلى كلام.

سنقوم بتنفيذ الدالة say ونجعلها تستخدم واجهة برمجة التطبيقات المدمجة من أجل البدء في التحدث. من الآن فصاعدًا ، لن يتم تشغيل الكود الخاص بنا إلا في المتصفح لأننا سنستخدم المتغيرات المرفقة بمتغير النافذة. نحن نستخدم التعبير المنتظم / المقاطعة&\/\\# ، +()$~٪.'"*؟<>{{{/g لتصفية أي أحرف يجب على المساعد أن ينطقها.

التنفيذ الأساسي لوظيفة القول (assistant.js).

الآن بعد أن أصبح بإمكان مساعدنا التحدث ، لا يزال يتعين عليه الاستماع إلى ما نقوله. من أجل القيام بذلك ، يتعين علينا إنشاء مثيل على webkitSpeechRecognition ، وتعيين لغته على اللغة التي حددناها في التكوين الخاص بنا ، وتأكد من إعادة التشغيل بعد سماع جملة وتوصيلها بوظيفة المعالجة الخاصة بنا.

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

تهيئة أداة التعرف الأساسية في المُنشئ (assistant.js).

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

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

التنفيذ الكامل لتحويل النص (assistant.js).

إنشاء مثيل مساعد جديد

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

إنشاء مثيل جديد وبدء مساعد جديد (index.js).

مصدر الرمز

يمكنك مراجعة كل شفرة هذه المقالة في مستودع robinjs-website. يتم أيضًا استضافة المثال الذي قمت بإنشائه هنا على robinjs.party حتى تتمكن من تشغيل العرض التوضيحي على الفور.

خاتمة

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

إذا كانت لديك أسئلة أو أعجبك هذا المشروع ، فأعلمني!

ترميز سعيد