05. INTEGRATION GUIDE & SDK EXAMPLES
어플리케이션 적용 및 개발 플레이북
웹, 모바일(Android/iOS), 데스크톱 환경에 온디바이스 AI를 즉시 도입할 수 있는 실전 코드 스니펫
Web Application (JavaScript / TypeScript + WebGPU)
크롬/에지 브라우저에서 WebGPU 및 Transformers.js를 사용하여 설치 없이 인브라우저 오프라인 SLM / Vision 모델 구동.
npm install @mlc-ai/web-llm @huggingface/transformers
import { CreateMLCEngine } from "@mlc-ai/web-llm";
async function initLocalAI() {
// 1. WebGPU capability check
if (!("gpu" in navigator)) {
throw new Error("WebGPU is not supported in this browser.");
}
// 2. Initialize WebLLM engine with quantized Llama 3.2 1B
const engine = await CreateMLCEngine("Llama-3.2-1B-Instruct-q4f16_1-MLC", {
initProgressCallback: (progress) => {
console.log(`Model Loading: ${Math.round(progress.progress * 100)}% - ${progress.text}`);
}
});
// 3. Generate response locally on device GPU
const response = await engine.chat.completions.create({
messages: [{ role: "user", content: "Summarize On-Device AI benefits" }],
temperature: 0.7,
max_tokens: 150
});
console.log("Local Response:", response.choices[0].message.content);
}
initLocalAI();