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';

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

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

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

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', // 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 = 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. ประสิทธิภาพ 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. นําเข้าและใช้แบ็กเอนด์ 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()