このチュートリアルでは、TensorFlow 姿勢検出モデル( MoveNet.SinglePose.Lightning ) を使用してリアルタイムの姿勢検出を行う React Native サンプル アプリをインストールして実行します。 React Native 用の TensorFlow.js プラットフォーム アダプター上に構築されたこのアプリは、前面カメラと背面カメラでポートレート モードとランドスケープ モードの両方をサポートします。
前提条件
このチュートリアルを完了するには、開発環境に以下がインストールされている必要があります。
TensorFlow.js React Native プラットフォーム アダプターはexpo-glおよびexpo-gl-cppに依存しているため、 Expoでサポートされているバージョンの React Native を使用する必要があります。
サンプルアプリをインストールして実行する
tfjs-examplesリポジトリのクローンを作成するか、ダウンロードします。react-native/pose-detectionディレクトリに移動します。cd tfjs-examples/react-native/pose-detection依存関係をインストールします。
yarnサンプル アプリをローカルで実行します。
yarn start
アプリを実行すると、端末に QR コードが表示されます。
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀ ▀ ███ ▄▄▄▄▄ █
█ █ █ █ █▀ █ ▀█ █ █ █
█ █▄▄▄█ █▄█▀ ▄▀█▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ █ █▄▀ █▄▄▄▄▄▄▄█
█▄ ▄▀█▄█ █ ▄ ▀▀▄▄▄██▄ ▄▀▄█
██▄▀▀█▀▄█▀ ▄▄▀ █▀█ ▀██▀███
█▄▄▀ ▀▀▄▄▄ ▄▀ ▄█ ▄█ ▄ █ █▀█
█▀▄▄ ▄▄▄▀ ▄ █▄██ ▀▀█▀▀█ ▀█
███▄▄██▄█▀▄██▄ ▄ ▄▄▄ ▀▄█▀█
█ ▄▄▄▄▄ ██ ▀██▀█ █▄█ █▄▄ █
█ █ █ █▀█ ███▀▀▄▄ █▀ ▀█
█ █▄▄▄█ █ ▀▀▀▀▀▄▀▄▀▄█▄▄ ▄██
█▄▄▄▄▄▄▄█▄██▄▄██▄██████▄▄▄█
› Metro waiting on exp://192.168.0.6:19000
Expo Go がインストールされている電話またはその他のテスト デバイスで QR コードをスキャンします。サンプル アプリは Expo Go で開くはずです。
以下のスクリーンショットは、アプリがユーザーの体のキーポイントを検出してレンダリングする様子を示しています。
TensorFlow.js ライブラリが例でどのように使用されているかを理解するには、 App.tsxを参照してください。このファイル内のコメントでは、テンソル サイズの設定、モデルの読み込み、姿勢検出の実行などの方法が説明されています。
TensorFlow.js を使用したポーズ検出の詳細については、このブログ投稿を参照してください。
Reactive Native プラットフォーム アダプターの詳細
React Native 用の TensorFlow.js プラットフォーム アダプターは、TensorFlow.js の GPU アクセラレーションによる実行を提供し、TensorFlow.js の使用の主要なモードをすべてサポートします。
- モデル推論とトレーニングの両方のサポート
- expo-glを介した WebGL による GPU サポート
- Web からの事前トレーニング済みモデルのロードのサポート
IOHandlerは、非同期ストレージからのモデルの読み込みと、アプリバンドルにコンパイルされたモデルをサポートします。
完全なインストール手順については、React Native プラットフォーム アダプターのREADMEを参照してください。
React Native の TensorFlow.js のトラブルシューティング
起動時にアプリがクラッシュする場合は、設定の変更が必要になる場合があります。 React Native のプラットフォーム アダプターのセットアップの詳細については、 READMEを参照してください。