الكاتب: MOHD SANAD ZAKI رضوي

ترجمة: وو جين دي،

تصحيح التجارب المطبعية: دينغ NANYA

هذه المقالة حول 5500 كلمات وأوصى القراءة لمدة 15 دقيقة.

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

الخطوط العريضة

• TensorFlow.js (deeplearn.js) يسمح لنا ببناء آلة التعلم ونموذج التعلم العميق في المتصفح، دون الحاجة إلى أي إجراء تركيب معقد.
• TensorFlow.js العنصرين و--Core API طبقة API.
• تعلم كيفية بناء نموذج استخدام Tensorflow.js كبير من الكاميرات الشبكية في تصنيف الصور.

مقدمة

ما هي الأدوات المفضلة لديك لنماذج الكتابة تعلم الآلة؟ والعلماء البيانات على هذا السؤال الأبدي إعطاء إجابات مختلفة. بعض الناس يحبون RStudio، والبعض الآخر يفضل Jupyter أجهزة الكمبيوتر المحمولة. أنا بالتأكيد تنتمي إلى هذا الأخير.

لذلك، عندما كنت TensorFlow.js اجتمع لأول مرة (deeplearn.js سابقا)، فإن قلبي تنفجر. بناء نماذج التعلم الآلي في المتصفح؟ استخدام جافا سكريبت؟ كان يبدو جيدا ليكون صحيحا!

 أكثر من 4.3 مليار شخص استخدام متصفح ويب - تمثل نحو 55 من سكان العالم. - ويكيبيديا (مارس 2019)

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

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

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

 إذا كنت TensorFlow مبتدئ، يمكنك معرفة المزيد من المعلومات في المقالة التالية:

• TensorFlow 101: التنسورات فهم والرسوم البيانية لتبدأ مع ديب التعلم
• مقدمة في الشبكات العصبية تنفيذ باستخدام TensorFlow

دليل

أولا، لماذا يجب عليك استخدام TensorFlow.js؟

 1.1 باستخدام تصنيف الصور كاميرا ويب في المستعرض

 ميزة 1.2 TensorFlow.js

ثانيا، فهم متصفح تعلم الآلة

 2.1 الأساسية API: العمل استخدام التنسورات

 API 2.2 طبقة: نفس بناء نموذج مثل Keras

ثالثا، استخدام نموذج ما قبل التدريب جوجل: PoseNet

أولا، لماذا يجب استخدام TensorFlow.js؟

وسوف تستخدم نهج فريد للإجابة على هذا السؤال. ولن أخوض في TensorFlow.js الجوانب النظرية أيضا لا تسرد السبب في أنه من مثل هذه الأداة لا يصدق.

 بدلا من ذلك، وأنا ببساطة تظهر لك ما إذا كنت لا تستخدم TensorFlow.js سوف تفوت. لذا، دعونا بناء على الطلب في غضون 5 دقائق، واستخدام كاميرا ويب الخاص بك إلى صور تصنيف. نعم - سوف نذهب مباشرة إلى القسم رمز!

 هذا هو أفضل جزء - أنت لا تحتاج إلى تثبيت أي شيء للقيام بذلك! طالما محرر النصوص ومتصفح الإنترنت. يظهر الرسم البياني التالي تطبيق ديناميكية ونحن في طريقنا لبناء:

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

  1.1 استخدم كاميرا الويب لبناء نموذج تصنيف الصور في المتصفح

فتح محرر النصوص التي تختارها وإنشاء index.html والملفات. حفظ التعليمات البرمجية التالية في هذا الملف:

< ! DOCTYPE HTML > < أتش تي أم أل > < رئيس > < الفوقية محارف = "UTF-8" > < الفوقية HTTP-EQUIV = "X-UA-Compatible إلى" محتوى = "IE = الحافة" > < اسم ميتا = "العرض" محتوى = "العرض = جهاز العرض، الأولي النطاق = 1" > < ! - عنوان الصفحة - > < لقب > image_classification < / عنوان > < ! - حمل المعالجة library-- > < النصي SRC = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js" > < / سيناريو > < النصي SRC = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js" > < / سيناريو > < ! - ml5.js الحمل - > < النصي SRC = "https://unpkg.com/ml5@0.1.1/dist/ml5.min.js" > < / سيناريو > < ! - index.js الحمل - > < النصي SRC = "index.js" > < / سيناريو > < / رئيس > < هيئة > < ! - وهذا هو المكان الذي سيتم عرض الفيديو - > < فيديو معرف = "فيديو" > < / فيديو > < / الهيئة > < / الاكواد >

بعد ذلك، إنشاء index.js ملف آخر والذي كتابة التعليمات البرمجية التالية:

 السماح mobilenet. السماح الفيديو؛ ترك التسمية = ''؛ // عندما النموذج هو على استعداد جعل التوقعات وظيفة modelReady () { console.log ( 'نموذج جاهز!')؛ mobilenet.predict (gotResults)؛ } gotResults وظيفة (خطأ، والنتائج) { إذا (خطأ) { console.error (خطأ)؛ } {شيء آخر التسمية = النتائج .className. // حلقة الاستدلال التي تطلق على نفسها mobilenet.predict (gotResults)؛ } } // الإعداد وظيفة الإعداد وظيفة () { createCanvas (640، 550)؛ // ml5 لخلق التقاط الفيديو فيديو = createCapture (VIDEO)؛ video.hide ()؛ الخلفية (0)؛ // تحميل MobileNet وتطبيقه على خدمة الفيديو mobilenet = ml5.imageClassifier ( 'MobileNet، الفيديو، modelReady)؛ } تعادل وظيفة () { الخلفية (0)؛ // عرض الفيديو صورة (فيديو، 0، 0)؛ التعبئة (255)؛ TEXTSIZE (32)؛ // تظهر التسمية التنبؤ النص (التسمية، 10، الطول - 20)؛ }

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

فيديو إتصال:

https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/05/mobilenet_demo.mp4؟_=1

 نقطة إلى الإشارة في هذا المثال:

• في المثال أعلاه، ونحن نستخدم نموذج تصنيف الصور MobileNet والمدربين قبل (https://ai.googleblog.com/2017/06/mobilenets-open-source-models-for.html)
• نحن نستخدم ml5.js (https://ml5js.org/) لبناء مكتبة من خلال TensorFlow. يتم تحميل ذلك النموذج MobileNet في المتصفح، والمنطق إعدام الفيديو.
• ونحن أيضا استخدام P5.js (https://p5js.org/) مكتبة للتعامل مع إدخال الفيديو وعرض التسمية على الفيديو نفسه.

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

 الآن، دعونا ننظر في قوة TensorFlow.js تقدم، وكيفية استخدام نماذج تعلم آلة انتشارها في المتصفح.

  ميزة 1.2 TensorFlow.js

 TensorFlow.js هي مكتبة للتنمية جافا سكريبت والتدريب نموذج ML، والمنتشرة في المتصفح أو Node.js.

 يوفر TensorFlow.js عددا من الميزات بالنسبة لنا لاستخدامها.

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

• إذا ML النموذج هو لغة على شبكة الإنترنت هو أسهل للنشر.
• ونظرا لأن جميع المتصفحات الرئيسية تدعم جافا سكريبت، بحيث يمكن استخدامه في كل مكان في الأرض، دون الحاجة إلى القلق بشأن قضايا التوافق أو غيرها من أنواع منصة. وينطبق الشيء نفسه للمستخدمين.
• TensorFlow.js هي مكتبة العميل، مما يعني أنه يمكن تشغيل ML نموذج القطار أو في متصفح المستخدم. هذا يخفف من أية مخاوف تتعلق بخصوصية البيانات.
• يعمل على العميل الخاص بك يسمح لك لاستنتاج التطبيقات في الوقت الحقيقي أكثر تفاعلية، لأنها تستجيب على الفور لإدخال المستخدم (على سبيل المثال، قمنا ببناء أمام تطبيق الكاميرا).

TensorFlow.js العروض شكله الحالي الميزات الرئيسية التالية:

• متصفح تعلم الآلة: يمكنك استخدام TensorFlow.js إنشاؤها في المتصفح والتدريب نموذج ML.
• نموذج ما قبل التدريب جوجل: كما تم تزويد طراز TensorFlow.js مع مجموعة من قبل المدربين من قبل جوجل للكشف عن وجوه، وتجزئة الصور، التعرف على الكلام، والمهام تصنيف النص السامة.
• نقل التعلم: يمكنك تنفيذ نقل عن طريق التعلم على جزء من نموذج تم تدريبهم إعادة تدريب، مثل TensorFlow.js من MobileNet.
• نماذج النشر الثعبان: يستخدم نموذج Keras أو TensorFlow التدريب يمكن بسهولة استيراد TensorFlow.js المتصفح / استخدام النشر.

 في هذه المقالة، سوف نركز على وظائف الأولين. في الجزء الثاني من هذه السلسلة (قريبا!)، وسوف نناقش كيفية نقل التعلم ونشر نموذجنا في بيثون.

  الثاني، متصفح تعلم الآلة

يوفر TensorFlow.js طريقتين لتدريب نموذج (تشبه الى حد بعيد TensorFlow):

•  الأسلوب الأول هو استخدام API الأساسية باستخدام أقل موتر التشغيل لتحديد نموذج.
• الطريقة الثانية هي استخدام نموذج تعريف الطبقات API، على غرار Keras.

الذهاب دعونا من خلال بعض الأمثلة لفهم كلتا الطريقتين. بعد كل شيء، فإن أفضل طريقة لتعلم مفهوم هو وضعه موضع التنفيذ!

 أولا، تعيين ملف HTML الخاص بك:

 إنشاء ملف index.html وجديد على جهاز الكمبيوتر الخاص بك والذي كتابة التعليمات البرمجية التالية:

< أتش تي أم أل لانج = "أون" > < رئيس > < الفوقية محارف = "UTF-8" > < اسم ميتا = "العرض" محتوى = "العرض = جهاز العرض، الأولي النطاق = 1.0" > < الفوقية HTTP-EQUIV = "X-UA-Compatible إلى" محتوى = "أي = الحافة" > < ! - Tensorflow.js الحمل - > < النصي SRC = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js" > < / سيناريو > < / رئيس > < هيئة > < H1 > API Tensorflow.js الأساسية < / H1 > < ! - < النصي SRC = "index.js" > < / سيناريو >  - > < نوع النصي = "نص / جافا سكريبت" > < / سيناريو > < / الهيئة > < / الاكواد >

 أنشأنا صفحة HTML الأساسية، وتحميلها Tensorflow.js سحابة من URL (الخط 7).

  تعليمات لتثبيت TensorFlow.js (deeplearn.js) من:

 منذ تم تصميم TensorFlow.js للمتصفح، وبالتالي فإن تركيب واستخدام TensorFlow.js أسهل طريقة هي ببساطة ليست تثبيته. يمكنك ببساطة تحميله من HTML إلى URL.

 إذا كنت ترغب في العمل محليا كيف نفعل ذلك؟ في الواقع، يمكنك استخدام TensorFlow.js في Jupyter المحمول، تماما كما تفعل عادة في بايثون أو R ذلك. هذا هو الحل للجميع!

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

الآن، أوصى باستخدام TensorFlow.js طريقة لاستخدام URL الرسمي للمكتبة تحميله مباشرة. تحتاج فقط إلى إضافة الأسطر التالية إلى ملف HTML:

< scriptsrc = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js" > < / سيناريو >

القيام به! انها حقا بسيطة للغاية.

2.1 الأساسية API: العمل استخدام التنسورات

 الأساسية API وTensorFlowCore متشابهة جدا، يمكننا استخدام مستوى منخفض الخطي تعريف نموذج الجبر والموترة العمليات.

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

 أولا، في ملف index.html و < سيناريو >   < / سيناريو > إضافة علامة البرمجية التالية:

CONST ل= tf.tensor ()؛ CONST ب = tf.tensor (). CONST ذ = a.add (ب)؛ // تعادل tf.add (أ، ب) CONST ض = a.mul (ب)؛ y.print ()؛ z.print ()؛

< سيناريو > الكلمات أعرب أساسا جافا سكريبت. لا شيء نكتب في ما بين هذه العلامات سوف يتم تنفيذها كبرنامج شفرة جافا سكريبت. وفيما يلي index.html وسوف ننظر:

< أتش تي أم أل لانج = "أون" > < رئيس > < الفوقية محارف = "UTF-8" > < اسم ميتا = "العرض" محتوى = "العرض = جهاز العرض، الأولي النطاق = 1.0" > < الفوقية HTTP-EQUIV = "X-UA-Compatible إلى" محتوى = "أي = الحافة" > < ! - Tensorflow.js الحمل - > < النصي SRC = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js" > < / سيناريو > < / رئيس > < هيئة > < H1 > API Tensorflow.js الأساسية < / H1 > < ! - < النصي SRC = "index.js" > < / سيناريو >  - > < نوع النصي = "نص / جافا سكريبت" > CONST ل= tf.tensor ()؛ CONST ب = tf.tensor (). CONST ذ = a.add (ب)؛ // تعادل tf.add (أ، ب) CONST ض = a.mul (ب)؛ // تعادل tf.mul (أ، ب) y.print ()؛ z.print ()؛ < / سيناريو > < / الهيئة > < / الاكواد >

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

python3 -m http.server

ثم فتح العنوان التالي في المتصفح:

HTTP: // المضيف المحلي: 8000 /

عندما تشاهد الصفحة التي تظهر "Tensorflow.js الأساسية API" عند استخدام مفتاح Ctrl + شيفت + I مفاتيح لفتح وحدة (وحدة). هذا ينبغي أن تطبق في Chrome وفايرفوكس. نحصل على ناتج العملية في وحدة التحكم:

 إذا كنت ترغب في قراءة معلومات أكثر عمقا عن API الأساسية، ثم أقترح عليك قراءة الوثائق الرسمية CoreAPI.

وثيقة CoreAPI:

https://www.tensorflow.org/js/guide/tensors_operations

  API 2.2 طبقة: نفس بناء نموذج مثل Keras

 طبقات API مع بيثون في Keras مشابهة جدا. مثل Keras، يمكنك إنشاء النماذج باستخدام طريقة وتسلسل المهام.

 دعونا نستخدم هذا المثال من دراسة متأنية لطريقة التسلسل. سنقوم بتدريب نموذج الانحدار على هذه النقاط البيانات:

 هنا، X و Y لديها علاقة خطية - كل Y الموافق X + ط (حيث i غير 0،1،2،3 ...... ن + 1). دعونا تدريب نموذج الانحدار الأساسي في هذه المجموعة البيانات. يمكنك في ملف index.html و < سيناريو > < / سيناريو > كتابة التعليمات البرمجية التالية بين العلامات:

CONST الاسترجاعات = { onEpochEnd: المتزامن (عصر، وسجلات) = >  { console.log ( "الحقبة:" + حقبة + JSON.stringify (سجلات)) } }؛ // توليد بعض البيانات الاصطناعية للتدريب. CONST XS = tf.tensor2d (، ، ، >، )؛ CONST يس = tf.tensor2d (، ، ، >، )؛ // بناء ونموذج التحويل البرمجي. المتزامن وظيفة basicRegression () { // بناء نموذج متسلسل نموذج CONST = tf.sequential ()؛ model.add (tf.layers.dense ({الوحدات: 1، inputShape: }))؛ model.add (tf.layers.dense ({الوحدات: 1، inputShape: }))؛ model.compile ({محسن: "دولار سنغافوري"، وفقدان: "meanSquaredError '})؛ // قطار نموذج مع صالح (). model.fit انتظار (XS، يس، {العهود: 100، validationSplit: 0.1، رد: رد})؛ // تشغيل الاستدلال مع التنبؤ (). model.predict (tf.tensor2d (>، )) طباعة ()؛ } // إنشاء نموذج الانحدار الأساسي basicRegression ()؛

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

 لدينا نموذج الانحدار البسيط للتنبؤ 7.556، قريبة جدا من القيمة المتوقعة من 8. وهذا مثال الأساسية، ولكن يمكننا أن نرى بوضوح أن آلة بناء نماذج التعلم مباشرة في المستعرض مدى سهولة ونعم مفيدة.

 TensorFlow.js قادرة على التعلم بناء آلة ونموذج التعلم العميق في المتصفح. كما تلقائيا للاستفادة من قوة GPU (ق)، ويمكن استخدامها إذا كان النظام الخاص بك أثناء التدريب النموذجي.

 وفيما يلي بعض الأمثلة باستخدام نموذج التعلم TensorFlow.js عمق في عدد من مجموعات البيانات القياسية على تدريب:

يمكنك تصفح هذه الأمثلة tfjs-أمثلة مستودع في.

tfjs-أمثلة مستودع:

https://github.com/tensorflow/tfjs-examples

  ثالثا، استخدام نموذج ما قبل التدريب جوجل: PoseNet

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

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

روابط ذات صلة:

https://www.tensorflow.org/js/models

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

  كيف يعمل PoseNet؟

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

 مجرد أن تكون واضحة - تقدير تشكل ليس عن تحديد من في صورة واحدة. الخوارزمية ببساطة تقدر موقف المفاصل الرئيسية في الجسم.

تم الكشف عن النقطة الأساسية هي لتعيين "الجزء" و "ID" مؤشر، درجة الثقة بين 0.0 و 1.0 (1.0 هو أعلى).

 وفيما يلي أمثلة من نوع PoseNet ناتج معين:

لا يصدق، أليس كذلك؟ ! سوف نستخدم مكتبة ml5.js استخدام PoseNet. ويستند ml5.js TensorFlow.js وp5.js المكتبات. p5.js هو مكتبة أخرى تمكنك من الوصول بسهولة أكبر كاميرا ويب في المستعرض الخاص بك.

 آلة ml5.js تهدف إلى جعل التعلم غالبية الفنانين، المبرمجون الإبداعي ويصبح الطلاب ودود. ويستند هذا مكتبة أساس TensorFlow.js، يوفر الوصول إلى آلة الخوارزميات ونماذج التعلم في المتصفح مع جملة بسيطة.

 على سبيل المثال، يمكنك استخدام MobileNet ml5.js 5 خطوط من رمز لخلق نموذج تصنيف الصور على النحو التالي:

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

 دعونا نعود PoseNet. إنشاء ملف index.html وجديد وإضافة التعليمات البرمجية التالية:

< أتش تي أم أل لانج = "أون" > < رئيس > < الفوقية محارف = "UTF-8" > < اسم ميتا = "العرض" محتوى = "العرض = جهاز العرض، الأولي النطاق = 1.0" > < الفوقية HTTP-EQUIV = "X-UA-Compatible إلى" محتوى = "أي = الحافة" > < ! - p5.js الحمل - > < النصي SRC = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js" > < / سيناريو > < النصي SRC = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js" > < / سيناريو > < ! - ml5.js الحمل - > < النصي SRC = "https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" نوع = "نص / جافا سكريبت" > < / سيناريو > < ! - الحفاظ على الفيديو في مركز متصفح - > < نوع النمط = "نص / المغلق" > الجسم { مواءمة النصوص: المركز؛ } < / النمط > < / رئيس > < هيئة > < H1 > PoseNet تجريبي مع Ml5.js < / H1 > < ص معرف = "الحالة" > تحميل نموذج ... < / P > < شعبة معرف = "videoContainer" > < / شعبة > < ! - تحميل ملف posenet.js - > < النصي SRC = "posenet.js" > < / سيناريو > < / الهيئة > < / الاكواد >

وهذا إنشاء صفحة HTML الأساسية وتحميل الملفات الضرورية.

• ml5.js وp5.js من خلال URL الرسمي يتم تحميل.
• posenet.js سوف نقوم بإعداد ملف لرمز استخدام PoseNet.

 الآن، وسوف نكتب كود جافا سكريبت لاستخدام PoseNet. إنشاء ملف جديد مع posenet.js index.html و في نفس المجلد. ما يلي هي الخطوات اللازمة لإتمام هذا العمل:

تحميل نموذج PoseNet والتقاط الفيديو من كاميرا ويب

المفاصل الكشف عن النقطة الأساسية في الجسم

مفاصل الجسم عرض الكشف

رسم الهيكل العظمي الجسم يقدر

 دعونا نبدأ من الخطوة الأولى.

  الخطوة 1: تحميل نموذج PoseNet والتقاط الفيديو من كاميرا ويب

 سوف نستخدم ml5.js PoseNet الحمل. وفي الوقت نفسه، p5.js حتى نتمكن من استخدام بضعة أسطر من التعليمات البرمجية لالتقاط الفيديو من كاميرا:

السماح الفيديو؛ السماح poseNet. السماح يطرح = ؛ الإعداد وظيفة () { CONST قماش = createCanvas (640، 480)؛ canvas.parent ( 'videoContainer')؛ // التقاط الفيديو فيديو = createCapture (VIDEO)؛ video.size (العرض والارتفاع). // إنشاء أسلوب poseNet جديدة مع كشف احد poseNet = ml5.poseNet (فيديو، modelReady)؛ // هذا يضع الحدث الذي يملأ متغير "يطرح" العالمية // مع مجموعة يتم الكشف عن كل مرة يطرح جديدة poseNet.on ( 'تشكل'، وظيفة (النتائج) { يطرح = النتائج؛ })؛ وظيفة modelReady () { حدد ( '# الوضع'). أتش تي أم أل ( 'نموذج المحملة') }

كتلة التعليمات البرمجية أعلاه هو الأكثر أهمية:

• createCapture (VIDEO): بل هو وظيفة p5.js، لإنشاء الفيديو التي تم التقاطها من قبل عناصر كاميرا الفيديو.
• ml5.poseNet (فيديو، modelRead): نحن نستخدم ml5.js وضع الحمل poseNet. بواسطة الفيديو واردة، ونقول للنموذج لمعالجة المدخلات الفيديو.
• PoseNet.on (): كلما تم الكشف عن بادرة جديدة، لأداء هذه المهمة.
• modelReady (): عندما PoseNet تحميل الانتهاء، فإننا ندعو هذه الوظيفة لعرض حالة النموذج.

  خطوة 2: الرئيسية المفاصل كشف نقطة من الجسم

 والخطوة التالية هي يكتشف الموقف. كنت قد لاحظت في الخطوة السابقة، نحن) سوف يتم حفظها إلى تشكل متغير عن طريق الاتصال poseNet.on (كل تشكل الكشف عنها. تشغيل هذه الوظيفة بشكل مستمر في الخلفية. كلما تجد وظيفة جديدة، وسوف تعطي موقف مشترك من الجسم في الشكل التالي:

• "نقاط" وهو يشير إلى مستوى الثقة للنموذج
• "الجزء" مما يدل على الكشف عن مفاصل الجسم / نقاط رئيسية
• موقف ' تضم كشف x و y موضع من الجزء

 ليس لدينا لكتابة رمز للقيام هذا الجزء، ليتم إنشاؤها تلقائيا.

  الخطوة 3: عرض مفصل البشري الكشف عن

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

 سوف نستخدم عتبة 20 (keypoint.score >  0.2) درجة الثقة، رسم نقطة حرجة. وفيما يلي التعليمات البرمجية التي تنفذ هذه العملية:

// وظيفة رسم الحذف على النقاط الرئيسية الكشف عن drawKeypoints وظيفة () { // حلقة من خلال الكشف عن يطرح ل(السماح ط = 0؛ ط <  poses.length، وأنا ++) { // لكل تشكل الكشف عن حلقة من خلال جميع النقاط الرئيسية السماح قفة = يطرح .pose. ل(السماح ي = 0؛ ي <  pose.keypoints.length؛ ي ++) { // A أو Keypoint هو كائن واصفا جزء من الجسم (مثل rightArm أو leftShoulder) السماح أو Keypoint = pose.keypoints . // رسم القطع الناقص فقط هو احتمال تشكل وأكبر من 0.2 إذا (keypoint.score >  0.2) { التعبئة (255، 0، 0)؛ noStroke ()؛ القطع الناقص (keypoint.position.x، keypoint.position.y، 10، 10)؛ } } } }

الخطوة 4: رسم الهيكل العظمي الجسم يقدر

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

// وظيفة لرسم الهياكل العظمية وظيفة drawSkeleton () { // حلقة من خلال الكشف عن الهياكل العظمية ل(السماح ط = 0؛ ط <  poses.length، وأنا ++) { السماح = بيوت يطرح .skeleton. // للحصول على كل هيكل عظمي، حلقة من خلال جميع وصلات الجسم ل(السماح ي = 0؛ ي <  skeleton.length؛ ي ++) { السماح partA = هيكل عظمي . السماح partB = هيكل عظمي . السكتة الدماغية (255، 0، 0)؛ خط (partA.position.x، partA.position.y، partB.position.x، partB.position.y)؛ } } }

هنا، نحن اجتياز الكشف عن هيكل عظمي وإنشاء خط يربط بين النقاط الرئيسية. رمز بسيط جدا.

 دعوات الآن، يتم تكرار الخطوة الأخيرة drawSkeleton () وdrawKeypoints () وظيفة، فضلا عن مصدر الفيديو تم الاستيلاء عليها من كاميرا ويب. يمكننا استخدام p5.js التعادل () وظيفة لتحقيق هذه الوظيفة الاتصال مباشرة الإعداد () في وقت لاحق وتكرار:

تعادل وظيفة () { صورة (فيديو، 0، 0، العرض، الارتفاع). // نحن يمكن أن نطلق على حد سواء وظائف رسم كل النقاط الرئيسية والهياكل العظمية drawKeypoints ()؛ drawSkeleton ()؛ }

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

python3 -m http.server

ثم انتقل إلى المتصفح، وفتح على العنوان التالي:

HTTP: // المضيف المحلي: 8000 /

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

السجل الأخير

يمكنك ان ترى لماذا أحب TensorFlow.js. فمن فعالة جدا، حتى أنك لا داعي للقلق بشأن إجراء تركيب معقد عند بناء النموذج.

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

 في المقالة القادمة، سوف نستكشف كيفية تطبيق التعلم نقل في المتصفح الخاص بك، وتعلم الآلة TensorFlow.js استخدام نشر أو نموذج التعلم العميق.

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

العنوان الأصلي:

بناء آلة التعلم نموذج في المستعرض الخاص بك باستخدام TensorFlow.jsand بيثون

الرابط الأصلي:

https://www.analyticsvidhya.com/blog/2019/06/build-machine-learning-model-in-your-browser-tensorflow-js-deeplearn-js/

مقدمة المترجم

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

- انتهى -

تسينغهوا الانتباه - بيانات أكاديمية تشينغداو للعلوم قناة الصغرى الرسمية منصة الجمهور " بيانات الإرسال THU "أيتها الأخوات ولا". إرسال البيانات THU "لرعاية المزيد من المحاضرات ونوعية المحتوى.