استخدم TensorFlow.js في تطبيق React Native

في هذا البرنامج التعليمي، ستقوم بتثبيت وتشغيل مثال لتطبيق React Native الذي يستخدم نموذج كشف الوضع TensorFlow ( MoveNet.SinglePose.Lightning ) للقيام باكتشاف الوضع في الوقت الفعلي. يعتمد التطبيق على محول النظام الأساسي TensorFlow.js لـ React Native ، ويدعم الوضعين الرأسي والأفقي مع الكاميرات الأمامية والخلفية.

المتطلبات الأساسية

لإكمال هذا البرنامج التعليمي، تحتاج إلى تثبيت ما يلي في بيئة التطوير الخاصة بك:

يعتمد محول النظام الأساسي TensorFlow.js React Native على expo-gl و expo-gl-cpp ، لذلك يجب عليك استخدام إصدار React Native المدعوم من Expo .

تثبيت وتشغيل التطبيق المثال

  1. قم باستنساخ أو تنزيل مستودع tfjs-examples .

  2. التغيير إلى دليل react-native/pose-detection :

    cd tfjs-examples/react-native/pose-detection

  3. تثبيت التبعيات:

    yarn

  4. قم بتشغيل التطبيق المثال محليًا:

    yarn start

عند تشغيل التطبيق، تعرض المحطة رمز الاستجابة السريعة.

Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀ ▀   ███ ▄▄▄▄▄ █
█ █   █ █   █▀ █ ▀█ █   █ █
█ █▄▄▄█ █▄█▀ ▄▀█▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ █ █▄▀ █▄▄▄▄▄▄▄█
█▄  ▄▀█▄█ █ ▄ ▀▀▄▄▄██▄ ▄▀▄█
██▄▀▀█▀▄█▀  ▄▄▀ █▀█ ▀██▀███
█▄▄▀ ▀▀▄▄▄ ▄▀ ▄█ ▄█ ▄ █ █▀█
█▀▄▄ ▄▄▄▀ ▄  █▄██ ▀▀█▀▀█ ▀█
███▄▄██▄█▀▄██▄  ▄ ▄▄▄ ▀▄█▀█
█ ▄▄▄▄▄ ██  ▀██▀█ █▄█ █▄▄ █
█ █   █ █▀█ ███▀▀▄▄   █▀ ▀█
█ █▄▄▄█ █ ▀▀▀▀▀▄▀▄▀▄█▄▄ ▄██
█▄▄▄▄▄▄▄█▄██▄▄██▄██████▄▄▄█

› Metro waiting on exp://192.168.0.6:19000

امسح رمز الاستجابة السريعة ضوئيًا باستخدام هاتف أو جهاز اختبار آخر مثبت عليه Expo Go. يجب أن يتم فتح التطبيق النموذجي في Expo Go.

تُظهر لقطات الشاشة أدناه التطبيق الذي يكتشف ويعرض النقاط الرئيسية لجسم المستخدم.

لَوحَةمنظر جمالي

لفهم كيفية استخدام مكتبات TensorFlow.js في المثال، انظر إلى App.tsx . تشرح التعليقات الموجودة في هذا الملف كيفية تكوين حجم الموتر، وتحميل النموذج، وتشغيل الكشف عن الوضع، والمزيد.

لمعرفة المزيد حول اكتشاف الوضعية باستخدام TensorFlow.js، راجع مشاركة المدونة هذه .

المزيد عن محول النظام الأساسي التفاعلي الأصلي

يوفر مهايئ النظام الأساسي TensorFlow.js لـ React Native تنفيذًا سريعًا بواسطة GPU لـ TensorFlow.js ويدعم جميع الأوضاع الرئيسية لاستخدام TensorFlow.js:

  • دعم كل من الاستدلال النموذجي والتدريب
  • دعم GPU مع WebGL عبر expo-gl
  • دعم لتحميل النماذج المدربة مسبقًا من الويب
  • يدعم IOHandler تحميل النماذج من التخزين غير المتزامن والنماذج التي يتم تجميعها في حزمة التطبيق

للحصول على تعليمات التثبيت الكاملة، راجع README لمحول النظام الأساسي React Native .

استكشاف أخطاء TensorFlow.js وإصلاحها في React Native

إذا تعطل تطبيقك عند بدء التشغيل، فقد تحتاج إلى تغيير الإعداد. لمعرفة المزيد حول إعداد محول النظام الأساسي لـ React Native، راجع ملف README .

,

في هذا البرنامج التعليمي، ستقوم بتثبيت وتشغيل مثال لتطبيق React Native الذي يستخدم نموذج كشف الوضع TensorFlow ( MoveNet.SinglePose.Lightning ) للقيام باكتشاف الوضع في الوقت الفعلي. يعتمد التطبيق على محول النظام الأساسي TensorFlow.js لـ React Native ، ويدعم الوضعين الرأسي والأفقي مع الكاميرات الأمامية والخلفية.

المتطلبات الأساسية

لإكمال هذا البرنامج التعليمي، تحتاج إلى تثبيت ما يلي في بيئة التطوير الخاصة بك:

يعتمد محول النظام الأساسي TensorFlow.js React Native على expo-gl و expo-gl-cpp ، لذلك يجب عليك استخدام إصدار React Native المدعوم من Expo .

تثبيت وتشغيل التطبيق المثال

  1. قم باستنساخ أو تنزيل مستودع tfjs-examples .

  2. التغيير إلى دليل react-native/pose-detection :

    cd tfjs-examples/react-native/pose-detection

  3. تثبيت التبعيات:

    yarn

  4. قم بتشغيل التطبيق المثال محليًا:

    yarn start

عند تشغيل التطبيق، تعرض المحطة رمز الاستجابة السريعة.

Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀ ▀   ███ ▄▄▄▄▄ █
█ █   █ █   █▀ █ ▀█ █   █ █
█ █▄▄▄█ █▄█▀ ▄▀█▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ █ █▄▀ █▄▄▄▄▄▄▄█
█▄  ▄▀█▄█ █ ▄ ▀▀▄▄▄██▄ ▄▀▄█
██▄▀▀█▀▄█▀  ▄▄▀ █▀█ ▀██▀███
█▄▄▀ ▀▀▄▄▄ ▄▀ ▄█ ▄█ ▄ █ █▀█
█▀▄▄ ▄▄▄▀ ▄  █▄██ ▀▀█▀▀█ ▀█
███▄▄██▄█▀▄██▄  ▄ ▄▄▄ ▀▄█▀█
█ ▄▄▄▄▄ ██  ▀██▀█ █▄█ █▄▄ █
█ █   █ █▀█ ███▀▀▄▄   █▀ ▀█
█ █▄▄▄█ █ ▀▀▀▀▀▄▀▄▀▄█▄▄ ▄██
█▄▄▄▄▄▄▄█▄██▄▄██▄██████▄▄▄█

› Metro waiting on exp://192.168.0.6:19000

امسح رمز الاستجابة السريعة ضوئيًا باستخدام هاتف أو جهاز اختبار آخر مثبت عليه Expo Go. يجب أن يتم فتح التطبيق النموذجي في Expo Go.

تُظهر لقطات الشاشة أدناه التطبيق الذي يكتشف ويعرض النقاط الرئيسية لجسم المستخدم.

لَوحَةمنظر جمالي

لفهم كيفية استخدام مكتبات TensorFlow.js في المثال، انظر إلى App.tsx . تشرح التعليقات الموجودة في هذا الملف كيفية تكوين حجم الموتر، وتحميل النموذج، وتشغيل الكشف عن الوضع، والمزيد.

لمعرفة المزيد حول اكتشاف الوضعية باستخدام TensorFlow.js، راجع مشاركة المدونة هذه .

المزيد عن محول النظام الأساسي التفاعلي الأصلي

يوفر مهايئ النظام الأساسي TensorFlow.js لـ React Native تنفيذًا سريعًا بواسطة GPU لـ TensorFlow.js ويدعم جميع الأوضاع الرئيسية لاستخدام TensorFlow.js:

  • دعم كل من الاستدلال النموذجي والتدريب
  • دعم GPU مع WebGL عبر expo-gl
  • دعم لتحميل النماذج المدربة مسبقًا من الويب
  • يدعم IOHandler تحميل النماذج من التخزين غير المتزامن والنماذج التي يتم تجميعها في حزمة التطبيق

للحصول على تعليمات التثبيت الكاملة، راجع README لمحول النظام الأساسي React Native .

استكشاف أخطاء TensorFlow.js وإصلاحها في React Native

إذا تعطل تطبيقك عند بدء التشغيل، فقد تحتاج إلى تغيير الإعداد. لمعرفة المزيد حول إعداد محول النظام الأساسي لـ React Native، راجع ملف README .