ใช้ 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 ให้การดำเนินการ TensorFlow.js ที่เร่งด้วย GPU และรองรับการใช้งาน TensorFlow.js โหมดหลักทั้งหมด:

  • รองรับทั้งการอนุมานแบบจำลองและการฝึกอบรม
  • รองรับ GPU ด้วย WebGL ผ่าน expo-gl
  • รองรับการโหลดโมเดลที่ฝึกไว้แล้วจากเว็บ
  • IOHandler เพื่อรองรับโมเดลการโหลดจากพื้นที่เก็บข้อมูลแบบอะซิงก์และโมเดลที่คอมไพล์ไว้ใน App Bundle

สำหรับคำแนะนำในการติดตั้งแบบเต็ม โปรดดูที่อะแดปเตอร์แพลตฟอร์ม React Native README

แก้ไขปัญหา TensorFlow.js สำหรับ React Native

หากแอปของคุณขัดข้องเมื่อเริ่มต้นระบบ คุณอาจต้องแก้ไขการตั้งค่า หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการตั้งค่าอะแดปเตอร์แพลตฟอร์มสำหรับ React Native โปรดดู README