Gunakan TensorFlow.js di aplikasi React Native

Dalam tutorial ini Anda akan menginstal dan menjalankan aplikasi contoh React Native yang menggunakan model deteksi pose TensorFlow ( MoveNet.SinglePose.Lightning ) untuk melakukan deteksi pose secara real-time. Dibangun pada adaptor platform TensorFlow.js untuk React Native , aplikasi ini mendukung mode potret dan lanskap dengan kamera depan dan belakang.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda perlu menginstal yang berikut ini di lingkungan pengembangan Anda:

  • Node.js ( unduh )
  • Benang ( pasang )
  • (Di ponsel atau perangkat pengujian lainnya) Expo Go ( instal )

Adaptor platform React Native TensorFlow.js bergantung pada expo-gl dan expo-gl-cpp , jadi Anda harus menggunakan versi React Native yang didukung oleh Expo .

Instal dan jalankan aplikasi contoh

  1. Kloning atau unduh repositori tfjs-examples .

  2. Ubah ke direktori react-native/pose-detection :

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

  3. Instal dependensi:

    yarn

  4. Jalankan aplikasi contoh secara lokal:

    yarn start

Saat Anda menjalankan aplikasi, terminal menampilkan kode QR.

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

› Metro waiting on exp://192.168.0.6:19000

Pindai kode QR dengan ponsel atau perangkat uji lain yang telah menginstal Expo Go. Aplikasi contoh akan terbuka di Expo Go.

Tangkapan layar di bawah menunjukkan aplikasi mendeteksi dan merender titik kunci tubuh pengguna.

PotretLanskap

Untuk memahami cara perpustakaan TensorFlow.js digunakan dalam contoh ini, lihat App.tsx . Komentar di file tersebut menjelaskan cara mengonfigurasi ukuran tensor, memuat model, menjalankan deteksi pose, dan banyak lagi.

Untuk mempelajari lebih lanjut tentang deteksi pose menggunakan TensorFlow.js, lihat postingan blog ini .

Lebih lanjut tentang adaptor platform Asli Reaktif

Adaptor platform TensorFlow.js untuk React Native menyediakan eksekusi TensorFlow.js yang dipercepat GPU dan mendukung semua mode utama penggunaan TensorFlow.js:

  • Dukungan untuk inferensi dan pelatihan model
  • Dukungan GPU dengan WebGL melalui expo-gl
  • Dukungan untuk memuat model terlatih dari web
  • IOHandler untuk mendukung pemuatan model dari penyimpanan asinkron dan model yang dikompilasi ke dalam app bundle

Untuk instruksi instalasi lengkap, lihat README adaptor platform React Native.

Memecahkan masalah TensorFlow.js untuk React Native

Jika aplikasi Anda mogok saat startup, Anda mungkin perlu mengubah pengaturan Anda. Untuk mempelajari lebih lanjut tentang menyiapkan adaptor platform untuk React Native, lihat README .