LiteRT สำหรับเว็บด้วย LiteRT.js

LiteRT.js คือรันไทม์ WebAI ประสิทธิภาพสูงของ Google ซึ่งมุ่งเป้าไปที่เว็บแอปพลิเคชันที่ใช้งานจริง ซึ่งเป็นส่วนต่อขยายของสแต็ก LiteRT เพื่อให้มั่นใจว่า เฟรมเวิร์กหลายรายการจะได้รับการรองรับ และรวมรันไทม์หลักของเรา ในทุกแพลตฟอร์ม

LiteRT.js รองรับฟีเจอร์หลักต่อไปนี้

1. การรองรับโมเดล LiteRT ในเบราว์เซอร์: เรียกใช้โมเดลที่มีประสิทธิภาพดีที่สุด ใน CPU ซึ่งเร่งความเร็วผ่าน XNNPack ใน WebAssembly (Wasm) และ GPU โดยใช้ API WebGPU
2. ความเข้ากันได้กับหลายเฟรมเวิร์ก: ใช้เฟรมเวิร์ก ML ที่ต้องการ ไม่ว่าจะเป็น PyTorch, Jax หรือ TensorFlow
3. สร้างไปป์ไลน์ที่มีอยู่: ผสานรวมกับไปป์ไลน์ TensorFlow.js ที่มีอยู่โดยรองรับ Tensor ของ TensorFlow.js เป็นอินพุตและเอาต์พุต

การติดตั้ง

ติดตั้งแพ็กเกจ @litertjs/core จาก npm โดยใช้คำสั่งต่อไปนี้

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 ใช้รูปแบบ .tflite เดียวกันกับ Android และ iOS และรองรับโมเดลที่มีอยู่บน Kaggle และ Huggingface หากมีโมเดล PyTorch ใหม่ คุณจะต้องแปลงโมเดล

แปลงโมเดล PyTorch เป็น LiteRT

หากต้องการแปลงโมเดล PyTorch เป็น LiteRT ให้ใช้ ai-edge-torch converter

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 ที่มีอยู่

คุณควรพิจารณาผสานรวม LiteRT.js เข้ากับไปป์ไลน์ TensorFlow.js ด้วยเหตุผลต่อไปนี้

1. ประสิทธิภาพ WebGPU ที่ดีที่สุด: โมเดลที่แปลงแล้วซึ่งทำงานบน LiteRT.js WebGPU ได้รับการเพิ่มประสิทธิภาพสำหรับประสิทธิภาพของเบราว์เซอร์ และทำงานได้รวดเร็วเป็นพิเศษในเบราว์เซอร์ที่ใช้ Chromium
2. เส้นทาง Conversion ของโมเดลที่ง่ายขึ้น: เส้นทาง Conversion ของ LiteRT.js จะไป จาก PyTorch ไปยัง LiteRT โดยตรง เส้นทางการแปลงจาก PyTorch เป็น TensorFlow.js มีความซับซ้อนมากขึ้นอย่างมาก โดยคุณต้องไปจาก PyTorch -> ONNX -> TensorFlow -> TensorFlow.js
3. เครื่องมือแก้ไขข้อบกพร่อง: เส้นทาง Conversion ของ LiteRT.js มาพร้อมกับเครื่องมือแก้ไขข้อบกพร่อง

LiteRT.js ออกแบบมาให้ทำงานภายในไปป์ไลน์ TensorFlow.js และเข้ากันได้กับการประมวลผลล่วงหน้าและหลังการประมวลผลของ TensorFlow.js ดังนั้นสิ่งเดียวที่คุณต้องย้ายข้อมูลคือตัวโมเดลเอง

ผสานรวม LiteRT.js เข้ากับไปป์ไลน์ TensorFlow.js โดยทำตามขั้นตอนต่อไปนี้

1. แปลงโมเดล TensorFlow, JAX หรือ PyTorch ต้นฉบับเป็น .tflite ดูรายละเอียดได้ที่ส่วนConversion ของโมเดล
2. ติดตั้งแพ็กเกจ @litertjs/core และ @litertjs/tfjs-interop NPM
3. นําเข้าและใช้แบ็กเอนด์ WebGPU ของ TensorFlow.js ซึ่งจำเป็นเพื่อให้ 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()