الكاتب | فيكتور Dibia

المترجم | شيويه مصباح الحياة

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

عرض: الشبكي: //victordibia.github.io/handtrack.js/#/

المدة: 22 FPS، ماك بوك برو 2018 (2.5 غيغاهرتز)، ومتصفح كروم. 13FPS، ماك بوك برو 2014 (معالج 2.2GHz).

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

https://github.com/victordibia/handtracking

ومنذ ذلك الحين، سيتم استخدامها لتطوير بعض الأمور مثيرة جدا للاهتمام، مثل:

يمكن أن يكون أداة لمساعدة أطفال ممارسة الإملائي:

https://medium.com/@drewgillson/alphabot-a-screen-less-interactive-spelling-primer-powered-by-computer-vision-cc1095bce90

يمكن التعرف على لفتة من المكونات الإضافية:

https://github.com/MrEliptik/HandPose

لعبة بينغ بونغ:

https://github.com/alvinwan/hand-tracking-pong

هناك الكثير من الناس كنت أريد أن أحاول لتقديم نموذج التدريب، ولكن لا يمكن إعداد Tensorflow (تركيب، الإصدار TF، الرسوم البيانية التصدير، وما إلى ذلك). لحسن الحظ، Tensorflow.js حل بعض من تركيب وتوزيع هذه المشاكل، لأنه هو الأمثل ليتم تشغيله في مستعرض بيئة موحدة. تحقيقا لهذه الغاية، وإنشاء مكتبة Handtrack.js:

https://github.com/victordibia/handtrack.js/

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

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

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

كيفية استخدامها في تطبيق ويب؟

يمكنك تضمين مباشرة في عنوان URL العلامة النصي هذه المكتبة، أو استخدام أداة بناء لاستيراده من الآلية الوقائية الوطنية.

 استخدام علامة النصي

Handtrack.js التقليل الملفات شبيبة استضافت حاليا على jsdelivr، jsdelivr هو حر ومفتوح المصدر CDN، بحيث يمكنك تضمين أي من تطبيقات حزمة الويب الآلية الوقائية الوطنية.

< النصي SRC = "https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js" >   < / سيناريو >

بعد إضافة علامة السيناريو أعلاه لصفحات HTML، يمكنك أن تستخدم handTrack handtrack.js متغير المرجعية، كما هو مبين أدناه.

CONST IMG = document.getElementById ( 'img الصورة)؛ handTrack.load (). ثم (نموذج = >  { model.detect (IMG). ثم (التنبؤات = >  { console.log ( 'التوقعات:'، التوقعات) // التنبؤات BBOX })؛ })؛

والمقتطف أعلاه بطباعة علامة img قبل اردة تنبأ صورة الإطار، الفيديو، أو إذا تم تقديمه من خلال الإطار صورة الكاميرا، يمكن أن يكون "تتبع" اليد التي تظهر في كل إطار.

استخدام handtrack.js صورة تتبع في متناول اليد، يمكنك الاتصال renderPredictions () طريقة لرسم الحدود والصورة المصدر في الكشف عن وجوه قماش.

استخدام الآلية الوقائية الوطنية

يمكنك استخدام handtrack.js الأمر التالي كحزمة الآلية الوقائية الوطنية لتثبيت:

الآلية الوقائية الوطنية تثبيت handtrackjs --save

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

استيراد * كما handTrack من "handtrackjs '؛ CONST IMG = document.getElementById ( 'img الصورة)؛ // تحميل نموذج. handTrack.load (). ثم (نموذج = >  { // الكشف عن الكائنات في الصورة. console.log ( "نموذج تحميل") model.detect (IMG). ثم (التنبؤات = >  { console.log ( 'التوقعات: "التنبؤات)؛ })؛ })؛

Handtrack.js من API

العروض Handtrack.js عدة طرق. الطرق الرئيسية هما حمولة () وكشف ()، على التوالي، لنموذج الكشف ناحية التحميل وتكتسب نتائج التنبؤ.

طريقة تحميل () يأخذ المعلمات نموذج اختياري، ونموذج يسمح لك للسيطرة على الأداء. هذا الشكل webmodel طريقة (استضافت أيضا على jsdelivr) ناحية تحميل نموذج الكشف المسبق للتدريب.

كشف () طريقة يأخذ المعلمات مصدر الدخل (IMG، الفيديو أو كائن قماش) ويعود الموقف من جهة في نتائج التنبؤ إطار الصورة.

CONST modelParams = { flipHorizontal: صحيح، // الوجه منها مثلا للفيديو imageScaleFactor: 0.7، // تقليل المدخلات حجم الصورة. maxNumBoxes: 20، // الحد الأقصى لعدد صناديق للكشف عن iouThreshold: 0.5، // عتبة آيو لقمع غير ماكس scoreThreshold: 0.79، // عتبة الثقة للتوقعات. } CONST IMG = document.getElementById ( 'img الصورة)؛ handTrack.load (modelParams). ثم (نموذج = >  { model.detect (IMG). ثم (التنبؤات = >  { console.log ( 'التوقعات: "التنبؤات)؛ })؛ })؛

وتوقع النتائج الشكل التالي:

يوفر Handtrack.js أيضا أساليب المساعد إضافية:

• model.getFPS (): احصل على FPS، وأحيانا كشف في الثانية الواحدة.
• model.renderPredictions (التنبؤات، قماش، والسياق، ميديا سورس): رسم الحدود (مصدر الصورة) على قماش محددة؛
• model.getModelParameters (): عودة المعلمات نموذج.
• model.setModelParameters (modelParams): تحديث معلمات النموذج.
• التخلص (): المثال نموذج حذف.
• تيارات بدء كاميرا فيديو في عنصر فيديو معين: startVideo (فيديو). إرجاع الوعد، ويمكن استخدامها للتحقق من سلطة المستخدم لتوفير الفيديو؛
• stopVideo (فيديو): وقف دفق الفيديو.

 حجم المكتبة وحجم نموذج

حجم المكتبة هو 810 KB، ويرجع ذلك أساسا يتم واحدة مع tensorflow.js معا مكتبة (هناك بعض المشاكل التي لم تحل النسخة الأحدث).

حجم النموذج هو 18.5 MB، في وقت تحميل الصفحة الأولى تحتاج إلى الانتظار فترة من الوقت. وينقسم TF.js نموذج عادة إلى ملفات متعددة (في هذا المثال أربعة ملفات وملف 4.2 MB 1.7 MB).

 أعمال

تستخدم Handtrack.js مكتبة Tensorflow.js، وAPI مرنة وبديهية، وتستخدم لبناء من نقطة الصفر في المتصفح والتدريب نموذج. أنه يوفر على مستوى منخفض جافا سكريبت الجبر الخطي المكتبات وAPI المستوى المتقدم.

إنشاء مكتبة Handtrack.js

إنشاؤها Tensorflow.js الخطوة بناء على مكتبة جافا سكريبت

 تجميع البيانات

البيانات المستخدمة في المشروع بشكل رئيسي من مجموعة البيانات Egohands ( وتشمل هذه الصور من 4800 من الموظفين، مع الحدود، واستخدام جوجل نظارات القبض عليه.

 تدريب نموذج

الاعتراض استخدام Tensorflow نموذج التدريب API الكشف. لهذا المشروع، استخدمنا رصاصة واحدة MULTIBOX الكاشف (https://arxiv.org/abs/1512.02325) وMobileNetV2 العمارة (https://arxiv.org/abs/1801.04381). ثم تدرب تصدير نماذج لsavedmodel.

 نموذج التحول

يوفر Tensorflow.js أداة تحويل نموذج، يمكنك استخدامه لتحويل شكل savedmodel webmodel التي يمكن تحميلها في المتصفح. وأخيرا، بعد حذف قسم معالجة الكشف عن وجوه في نموذج تخطيطي لعملية التحويل. هذا التحسين يسمح الكشف والتنبؤ ضعف سرعة العملية.

 مكتبة واستضافة مجموعة

تتكون المكتبة من فئات رئيسية، توفر هذه الفئة أساليب لتحميل صورة نموذج تم الكشف عن ومجموعة من الوظائف المفيدة الأخرى، على سبيل المثال startVideo، stopVideo، getFPS ()، renderPredictions ()، getModelParameters ()، setModelParameters () وهلم جرا. وصف كامل للطريقة يمكن الاطلاع على جيثب:

https://github.com/victordibia/handtrack.js/#other-helper-methods

ثم استخدم rollup.js الملفات المصدر حزمة ونشرت على الآلية الوقائية الوطنية (بما في ذلك ملف webmodel). حاليا Handtrack.js وTensorflow.js (v0.13.5) في حزمة واحدة، وذلك أساسا بسبب وقت كتابة هذه المكتبة، يحدث Tensorflow.js (v0.15) خطأ نوع عند تحميل التسمية موتر صورة / فيديو. إذا كان الإصدار الجديد بإصلاح هذه المشكلة، وأنا أيضا تحديث إلى الإصدار الأحدث.

 متى يجب استخدام Handtrack.js؟

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

وهنا بعض (وليس كل) لمسرح ذات الصلة:

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

تحديد

المتصفح هو مترابطة واحد: من الضروري التأكد من أن عمليات التنبؤ دون عرقلة موضوع UI. كل التنبؤ قد تحتاج 50-150 ميلي ثانية، وبالتالي فإن المستخدم سيلاحظ التأخير. في Handtrack.js مرات عديدة متكاملة حسب الحاجة لتقديم في الثانية عند التطبيق من الشاشة بأكملها (مثل الألعاب)، وجدت أنه من الضروري تقليل عدد توقع في الثانية الواحدة.

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

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

الخطوة التالية

يمثل Handtrack.js AI المراحل المبكرة من شكل جديد من أشكال التفاعل بين الإنسان والحاسوب. من ناحية المتصفح لديها بالفعل بعض الأفكار جيدة، مثل الكشف عن وقفة الإنسان لposenet:

https://github.com/tensorflow/tfjs-models/tree/master/posenet

وللمتصفح بالكشف عن تعبيرات الوجه handsfree.js:

https://handsfree.js.org/

في نفس الوقت، وأنا سوف تنفق المزيد من الوقت في المجالات التالية:

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

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

نماذج إضافية لقياس: والآن، ونحن نستخدم MobilenetV2. هل هناك حل سريع؟

النص الانكليزي:

https://hackernoon.com/handtrackjs-677c29c1d585