LiteRT.js를 사용한 웹용 LiteRT

LiteRT.js는 프로덕션 Web 애플리케이션을 타겟팅하는 Google의 고성능 WebAI 런타임입니다. LiteRT 스택의 연속으로, 다중 프레임워크 지원을 보장하고 모든 플랫폼에서 핵심 런타임을 통합합니다.

LiteRT.js는 다음 핵심 기능을 지원합니다.

  1. LiteRT 모델의 브라우저 내 지원: WebAssembly (Wasm)의 XNNPack을 통해 가속화된 CPU와 WebGPU API를 사용하는 GPU에서 동급 최고의 성능으로 모델을 실행합니다.
  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;

// Host LiteRT's Wasm files on your server.
await loadLiteRt(`your/path/to/wasm/`);

모델 변환

LiteRT.js는 Android 및 iOS와 동일한 .tflite 형식을 사용하며 Kaggle 및 Huggingface의 기존 모델을 지원합니다. 새 PyTorch 모델이 있는 경우 변환해야 합니다.

PyTorch 모델을 LiteRT로 변환

PyTorch 모델을 LiteRT로 변환하려면 ai-edge-torch 변환기를 사용하세요.

import ai_edge_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 = ai_edge_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', // or 'wasm' for XNNPack CPU inference
});
// 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 =
    await new Tensor(image, /* shape */ [1, 3, 224, 224]).moveTo('webgpu');

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

// Clean up and get outputs
inputTensor.delete();
const outputTensorCpu = await outputs[0].moveTo('wasm');
const outputData = outputTensorCpu.toTypedArray();
outputTensorCpu.delete();

기존 TensorFlow.js 파이프라인에 통합

다음과 같은 이유로 TensorFlow.js 파이프라인에 LiteRT.js를 통합하는 것이 좋습니다.

  1. 동급 최고 수준의 WebGPU 성능: LiteRT.js WebGPU에서 실행되는 변환된 모델은 브라우저 성능에 최적화되어 있으며 Chromium 기반 브라우저에서 특히 빠릅니다.
  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. 모델 파이프라인이 예상한 결과를 출력하는지 테스트합니다.

runWithTfjsTensors와 함께 LiteRT.js를 사용하는 경우 모델 입력에 다음과 같은 변경사항이 필요할 수도 있습니다.

  1. 입력 순서 재정렬: 변환기가 모델의 입력과 출력을 정렬한 방식에 따라 입력과 출력을 전달할 때 순서를 변경해야 할 수 있습니다.
  2. 입력 전치: 변환기가 TensorFlow.js에서 사용하는 것과 비교하여 모델의 입력 및 출력 레이아웃을 변경했을 수도 있습니다. 모델과 일치하도록 입력을 전치하고 파이프라인의 나머지 부분과 일치하도록 출력을 전치해야 할 수 있습니다.
  3. 입력 이름 바꾸기: 이름이 지정된 입력을 사용하는 경우 이름도 변경되었을 수 있습니다.

model.getInputDetails() 및 model.getOutputDetails()를 사용하여 모델의 입력 및 출력에 관한 자세한 정보를 확인할 수 있습니다.