LiteRT.js を使用したウェブ用 LiteRT

LiteRT.js は、本番環境のウェブ アプリケーションを対象とした Google の高性能 WebAI ランタイムです。LiteRT スタックの継続であり、 マルチフレームワークのサポートを保証し、すべてのプラットフォームでコア ランタイム を統合します。

LiteRT.js は、次のコア機能をサポートしています。

  1. ブラウザ内ハードウェア アクセラレーテッド推論: 軽量の WebAssembly（Wasm）にマッピングされた XNNPackによって高速化された、優れた CPU パフォーマンスでモデルを実行します。GPU と専用ハードウェア スケーリング（NPU など）の場合、 LiteRT.js は WebGPU API と新しい WebNN API の両方をネイティブに公開し、きめ細かいプラットフォーム固有の最適化を実現します。
  2. マルチフレームワークの互換性: 優先する ML フレームワーク（PyTorch、JAX、TensorFlow）からネイティブにコンパイルすることで、開発セマンティクスを効率化します。
  3. 既存のパイプラインを反復処理する: ネイティブにサポートされている TensorFlow.js テンソルを直接境界入力と出力として解析することで、既存の TensorFlow.js アーキテクチャ とすぐに統合できます。

インストール

npm から @litertjs/core パッケージをインストールします。

npm install @litertjs/core

Wasm ファイルは node_modules/@litertjs/core/wasm/ にあります。便宜上、wasm/ フォルダ全体をコピーして提供します。次に、パッケージをインポートして Wasm ファイルを読み込みます。

import {loadLiteRt} from '@litertjs/core';

// Load the LiteRT.js Wasm files from a CDN.
await loadLiteRt('https://cdn.jsdelivr.net/npm/@litertjs/core/wasm/')
// Alternatively, host them from your server.
// They are located in node_modules/@litertjs/core/wasm/
await loadLiteRt(`your/path/to/wasm/`);

モデル変換

LiteRT.js は、LiteRT エコシステムの他の部分と同じ .tflite 形式を使用し、 Kaggle と Huggingface の既存のモデルをサポートしています。新しい PyTorch モデルがある場合は、変換する必要があります。

PyTorch モデルを LiteRT に変換する

PyTorch モデルを LiteRT に変換するには、litert-torch コンバータを使用します。

import litert_torch

# Load your torch model. We're using resnet for this example.
resnet18 = torchvision.models.resnet18(torchvision.models.ResNet18_Weights.IMAGENET1K_V1)

sample_inputs = (torch.randn(1, 3, 224, 224),)

# Convert the model to LiteRT.
edge_model = litert_torch.convert(resnet18.eval(), sample_inputs)

# Export the model.
edge_model.export('resnet.tflite')

変換されたモデルを実行する

モデルを .tflite ファイルに変換したら、ブラウザで実行できます。

import {loadAndCompile} from '@litertjs/core';

// Load the model hosted from your server. This makes an http(s) request.
const model = await loadAndCompile('/path/to/model.tflite', {
    accelerator: 'webgpu',
    // Can select from 'webnn', 'webgpu', & 'wasm'.
    // Additionally, you can pass an array of accelerators e.g. ['webnn', 'wasm']
    // if you would like to fallback to CPU execution,
    // Note that ONLY cpu fallback is supported for now
    // (i.e. specifying ['webnn', 'webgpu']) will lead to compilation errors
});
// The model can also be loaded from a Uint8Array if you want to fetch it yourself.

// Create image input data
const image = new Float32Array(224 * 224 * 3).fill(0);
const inputTensor = new Tensor(image, /* shape */ [1, 3, 224, 224]);

// Run the model
const outputs = await model.run(inputTensor);
// You can also use `await model.run([inputTensor]);`
// or `await model.run({'input_tensor_name': inputTensor});`

// Clean up and get outputs
inputTensor.delete();
const output = outputs[0];
const outputData = await output.data();
output.delete();

既存の TensorFlow.js パイプラインに統合する

次の理由から、LiteRT.js を TensorFlow.js パイプラインに統合することを検討してください。

  1. 優れた GPU とハードウェアのパフォーマンス: LiteRT.js モデルは、ブラウザ アーキテクチャ全体でパフォーマンスを最適化するために WebGPU アクセラレーションを活用します。WebGPU と今後の WebNN をサポートすることで、LiteRT.js はさまざまなエッジデバイスで柔軟なハードウェア アクセラレーションを提供します。
  2. モデル変換パスの簡素化: LiteRT.js 変換パスは、 PyTorch から LiteRT に直接移行します。PyTorch から TensorFlow.js への変換パスは非常に複雑で、PyTorch -> ONNX -> TensorFlow -> TensorFlow.js の順に移行する必要があります。
  3. デバッグツール: LiteRT.js コンバージョン経路にはデバッグ ツールが付属しています。

LiteRT.js は TensorFlow.js パイプライン内で機能するように設計されており、TensorFlow.js の前処理と後処理と互換性があるため、移行する必要があるのはモデル自体のみです。

次の手順で、LiteRT.js を TensorFlow.js パイプラインに統合します。

  1. 元の TensorFlow、JAX、PyTorch モデルを .tflite に変換します。詳細については、モデル変換のセクションをご覧ください。
  2. @litertjs/core と @litertjs/tfjs-interop の NPM パッケージをインストールします。
  3. TensorFlow.js WebGPU バックエンドをインポートして使用します。 LiteRT.js が TensorFlow.js と相互運用するには、これが必要です。
  4. TensorFlow.js モデルの読み込みを LiteRT.js モデルの読み込みに置き換えます。
  5. TensorFlow.js model.predict(inputs) または model.execute(inputs) を runWithTfjsTensors(liteRtModel, inputs) に置き換えます。runWithTfjsTensors は、TensorFlow.js モデルが使用するのと同じ入力テンソルを受け取り、TensorFlow.js テンソルを出力します。
  6. モデル パイプラインが期待どおりの結果を出力することを確認します。

LiteRT.js を runWithTfjsTensors で使用する場合は、モデル入力に次の変更が必要になることもあります。

  1. 入力の並べ替え: コンバータがモデルの入力と 出力を並べ替えた方法によっては、渡すときに順序を変更する必要があります 。
  2. 入力の転置: コンバータが、TensorFlow.js で使用されるものと比較して、モデルの入力と出力の レイアウトを変更した可能性もあります。モデルに合わせて入力を 転置し、パイプラインの残りの部分に合わせて出力を転置する必要がある場合があります。
  3. 入力の名前を変更する: 名前付き入力を使用している場合は、名前も 変更されている可能性があります。

model.getInputDetails() と model.getOutputDetails() を使用すると、モデルの入出力に関する詳細情報を取得できます。