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 ให้ใช้ 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 = 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. นําเข้าและใช้แบ็กเอนด์ 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()