TensorFlow.js for React Native

以下の記事を参考に書いてます。

・TensorFlow.js for React Native is here!

1. はじめに

「TensorFlow.js for React Native」が利用できるようになりました。

2. React Nativeとは

「JavaScript」は、様々なプラットフォームで実行できます。ハイブリッドなアプリケーションフレームワークを使うことにより、開発者はJavaScriptを活用して、シングルコードベースからモバイルアプリ（iOS・Android）を開発できます。これらのフレームワークにより、開発者はブラウザの外部に存在しネイティブAPIを活用するアプリを作成できます。

「React Native」は、クロスプラットフォームなモバイルアプリが開発できるフレームワークです。オーサリング用の「Reactフレームワーク」とレンダリング用の「ネイティブUIコンポーネント」を統合します。「React Nativeウィジェット」は、ネイティブプラットフォームウィジェットです。JavaScriptスレッドから制御されます。このフレームワークは、アプリケーションを作成する方法を提供します。そして、JavaScriptスレッドとネイティブAPI間の通信を担当します。

3. tfjs-react-native

「React Native」のレンダリングは「Web View」に依存しません。そのため、私たちはTensorFlow.jsの使用に「Web View」を強制させないため、ブラウザで使用するWeb APIの多くに依存しないように設計しました。この環境に適した新しいプラットフォームインテグレーションとバックエンドを提供します。

「tfjs-react-nativeパッケージ」は、次の機能を提供します。

◎ GPUアクセラレーション
ブラウザと同様に、「React Native」の「TensorFlow.js」はWebGLを使用して、GPUアクセラレーションされた数学演算を行います。「OpenGL ES 3」を搭載したWebGL互換グラフィックコンテキストを提供する「expo-glライブラリ」を活用します。これにより、この新しい環境で既存のWebGL実装を再利用できます。

◎ モデルのロードと保存
ブラウザで実行できるすべての「TensorFlow.js」モデルをロードして実行できます。また、アプリバンドル自体にバンドルされている（したがって、リモートネットワーク呼び出しを必要としない）モデルをロードできる2つの新しいIOHandlerを提供します。これにより、カスタマイズされたモデルがローカルストレージに保存されます。

◎ 訓練サポート
「tfjs-react-native」は、「TensorFlow.js」が提供する訓練モデルと微調整モデルを完全にサポートしています。そのデータをクライアントデバイスに保持しながら、ユーザーデータに基づいてモデルをカスタマイズできます。

◎ 画像とビデオの処理
JPEGデコードおよびビデオ処理用のユーティリティが提供されています。リアルタイムビデオの処理は、「React Native」でネイティブからJavaScriptスレッドにデータを移動することによるシリアル化ペナルティのため、サポートするのが特に困難です。したがって、テンソルが作成される前にGPUで画像のサイズ変更を行う機能を提供します。これにより、開発者は、カメラストリームから推論のためにモデルに転送する必要があるデータを削減できます。このインテグレーションをReact Native開発者に自然に感じさせるために、React高次コンポーネントも提供しています。

4. サンプル

モデルの読み込みは、ブラウザで実行する場合とまったく同じように機能します。ここでは、アプリに含まれる画像で予測を実行します。

import * as mobilenet from '@tensorflow-models/mobilenet';
import { fetch, decodeJpeg } from '@tensorflow/tfjs-react-native';

// MobileNetのロード
const model = await mobilenet.load();

// アセットを取得しテンソルに変換
const image = require('./assets/images/catsmall.jpg');
const imageAssetPath = Image.resolveAssetSource(image);
const response = await fetch(imageAssetPath.uri, {}, { isBinary: true });
const imageData = await response.arrayBuffer();

const imageTensor = decodeJpeg(imageData);

const prediction = await model.classify(imageTensor);

// 予測
setState({
　 prediction,
});

ネイティブアプリは、ローカルに保存されたデータの操作に加えて、アプリのアセットと一緒にモデルをローカルに保存することもできます。以下のコードスニペットは、最終的なアプリビルドにバンドルされているカスタムモデルを読み込む方法を示しています。

import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';
import { fetch, decodeJpeg, bundleResourceIO } from '@tensorflow/tfjs-react-native';

// モデルリソースの取得
const modelJson = require('../assets/model/burger_not_burger.json');
const modelWeights = require('../assets/model/burger_not_burger_weights.bin');

// モデルのロード
const model = await tf.loadLayersModel(
 bundleResourceIO(modelJson, modelWeights));

// Webからの画像の読み込み
const uri = 'http://example.com/food.jpg';
const response = await fetch(uri, {}, { isBinary: true });
const imageData = await response.arrayBuffer();
const imageTensor = decodeJpeg(imageData);

const prediction = (await model.predict(imageTensor))[0];

// 予測
setState({
  prediction,
});

5. Platformインタフェース

「TensorFlow.js」を他のプラットフォームに移植しやすくするために、「Platformインターフェイス」を追加しました。このインターフェイスは、基盤となるプラットフォーム用に定義する必要がある4つの関数のみで構成されています。これを既存のバックエンド（JavaScript CPU、WebGL、最近ではWASM）の1つと結合するだけで、新しいプラットフォームインテグレーション統合を作成するのに十分なことがよくあります。このインテグレーションにより、様々なプラットフォームでこれを達成する方法のテンプレートが提供されることを願っています。