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();