Web API ของ LiteRT-LM สำหรับ JavaScript และ TypeScript ในเบราว์เซอร์ นี่คือเวอร์ชันพรีวิวเบื้องต้นที่รองรับการทำงานของข้อความเข้า / ข้อความออกใน WebGPU
รุ่นที่รองรับ
ปัจจุบัน LiteRT-LM JS API รองรับโมเดลที่ใช้กับเว็บได้บางรุ่นเท่านั้น
เรากำลังขยายการรองรับให้ครอบคลุมไฟล์โมเดล .litertlm ทั่วไป แต่ในตอนนี้ระบบรองรับโมเดลต่อไปนี้
gemma-4-E2B-it-web.litertlmจาก litert-community/gemma-4-E2B-it-litert-lmgemma-4-E4B-it-web.litertlmจาก litert-community/gemma-4-E4B-it-litert-lm
บทนำ
ตัวอย่างแอปแชท REPL ที่สร้างด้วย JavaScript API มีดังนี้
<div id="out" style="white-space: pre-wrap; font-family: monospace;"></div>
<input id="in" onkeydown="if(event.key === 'Enter') repl(this)">
<script type="module">
import { Engine } from 'https://cdn.jsdelivr.net/npm/@litert-lm/core/+esm';
const engine = await Engine.create({
// Load the Gemma 4 E2B model
model: 'https://huggingface.co/litert-community/gemma-4-E2B-it-litert-lm/resolve/main/gemma-4-E2B-it-web.litertlm'
// Or use the E4B model by swapping in this line
// model: 'https://huggingface.co/litert-community/gemma-4-E4B-it-litert-lm/resolve/main/gemma-4-E4B-it-web.litertlm'
});
const chat = await engine.createConversation();
window.repl = async (el) => {
const text = el.value;
el.value = ''; // Clear immediately
out.append(`\n>>> ${text}\nAI: `);
for await (const chunk of chat.sendMessageStreaming(text)) {
out.append(chunk.content[0].text);
}
};
</script>
เริ่มต้นใช้งาน
LiteRT-LM พร้อมให้บริการเป็นแพ็กเกจ npm คุณติดตั้งเวอร์ชันล่าสุดได้ จาก npm หรือนำเข้าจาก CDN โดยตรง
# From npm
npm i --save @litert-lm/core
# From a CDN (in your JavaScript file)
import * as litertlm from 'https://cdn.jsdelivr.net/npm/@litert-lm/core/+esm';
เริ่มต้น Engine
Engine คือจุดแรกเข้าของ API โดยจะจัดการการโหลดโมเดล การสร้างเซสชัน
และการจัดการทรัพยากร อย่าลืมdeleteเครื่องมือเพื่อปล่อย
ทรัพยากรเมื่อไม่จำเป็นต้องใช้โมเดลแล้ว
หมายเหตุ: การเริ่มต้นเครื่องมืออาจใช้เวลาหลายวินาทีในการโหลดโมเดล
import {Engine, EngineSettings} from '@litert-lm/core';
const engineSettings = {
model: 'url/path/to/model.litertlm', // or a ReadableStream, or a Blob
// You can configure context length and other settings here
mainExecutorSettings: {
maxNumTokens: 8192,
},
} satisfies EngineSettings;
const engine = await Engine.create(engineSettings);
// ... Use the engine to create a conversation ...
// Delete the engine when done.
await engine.delete();
สร้างการสนทนา
เมื่อเริ่มต้นเครื่องมือแล้ว ให้สร้างอินสแตนซ์ Conversation คุณสามารถ
ระบุ ConversationConfig เพื่อปรับแต่งลักษณะการทำงานของฟังก์ชันได้
const conversation = await engine.createConversation({
preface: {
messages: [
{role: 'system', content: 'You are a helpful assistant'}
]
}
});
conversation.sendMessage({
role: 'user',
content: 'Write a poem',
});
ส่งข้อความ
คุณส่งข้อความพร้อมหรือไม่มีการสตรีมก็ได้
ตัวอย่างที่ไม่ใช่การสตรีม
// Simple string input
let response = await conversation.sendMessage("What is the capital of France?");
console.log(response.content[0].text);
// Or with full message structure
response = await conversation.sendMessage({role: 'user', content: '...'});
ตัวอย่างการสตรีม
// sendMessageStreaming returns a ReadableStream of response chunks
const stream = conversation.sendMessageStreaming('Tell me a long story.');
for await (const chunk of stream) {
// Chunks are Records containing pieces of the response
for (const item of chunk.content) {
if (item.type === 'text') {
console.log(item.text);
}
}
}
ยกเลิกการสร้าง
คุณยกเลิกการสร้างที่กำลังดำเนินการอยู่ได้โดยเรียกใช้ cancel() ในอินสแตนซ์ Conversation ดังนี้
// Cancel any ongoing generation
conversation.cancel();
หากคุณกำลังสตรีมคำตอบ การออกจากลูป for await...of ก่อนเวลา (เช่น
ด้วย break) จะเป็นการยกเลิกการสร้างที่กำลังดำเนินการโดยอัตโนมัติด้วย
for await (const chunk of stream) {
if (shouldStop()) {
break; // Cancels the stream and underlying generation
}
}