השתמש ב- 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

כאשר אתה מפעיל את האפליקציה, המסוף מציג קוד QR.

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

› Metro waiting on exp://192.168.0.6:19000

סרוק את קוד ה-QR עם טלפון או מכשיר בדיקה אחר שמותקן בו Expo Go. האפליקציה לדוגמה אמורה להיפתח ב-Expo Go.

צילומי המסך למטה מציגים את האפליקציה שמזהה ומציגה נקודות מפתח של גוף המשתמש.

דְיוֹקָןנוֹף

כדי להבין כיצד נעשה שימוש בספריות TensorFlow.js בדוגמה, עיין ב- App.tsx . ההערות בקובץ זה מסבירות כיצד להגדיר את גודל הטנזור, לטעון את הדגם, להפעיל זיהוי תנוחות ועוד.

למידע נוסף על זיהוי תנוחות באמצעות TensorFlow.js, עיין בפוסט זה בבלוג .

עוד על מתאם הפלטפורמה Reactive Native

מתאם הפלטפורמה TensorFlow.js עבור React Native מספק ביצוע מואץ של GPU של TensorFlow.js ותומך בכל מצבי השימוש העיקריים של TensorFlow.js:

  • תמיכה הן בהסקת מודל והן בהדרכה
  • תמיכה ב-GPU עם WebGL דרך expo-gl
  • תמיכה בטעינת דגמים מאומנים מראש מהאינטרנט
  • IOHandler s כדי לתמוך בטעינת דגמים מאחסון אסינכרון ודגמים המורכבים לתוך חבילת האפליקציות

להוראות התקנה מלאות, עיין במתאם הפלטפורמה של React Native README .

פתרון בעיות של TensorFlow.js עבור React Native

אם האפליקציה שלך קורסת בעת ההפעלה, ייתכן שתצטרך לשנות את ההגדרה שלך. למידע נוסף על הגדרת מתאם הפלטפורמה עבור React Native, עיין ב- README .