5장: WebLLM과 브라우저에서의 LLM 추론

async function checkWebGPUSupport(): Promise<GPUDevice | null> {
  if (!navigator.gpu) {
    console.error("이 브라우저는 WebGPU를 지원하지 않습니다.");
    return null;
  }
 
  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: "high-performance",
  });
 
  if (!adapter) {
    console.error("적합한 GPU 어댑터를 찾을 수 없습니다.");
    return null;
  }
 
  const device = await adapter.requestDevice({
    requiredLimits: {
      maxBufferSize: 1024 * 1024 * 1024, // 1GB 버퍼
      maxStorageBufferBindingSize: 1024 * 1024 * 1024,
    },
  });
 
  console.log("WebGPU 디바이스 초기화 완료:", adapter.info);
  return device;
}

import { CreateMLCEngine, MLCEngine } from "@mlc-ai/web-llm";
 
let engine: MLCEngine | null = null;
 
// 엔진 초기화 및 모델 로딩
async function initEngine(
  onProgress: (progress: number, text: string) => void
): Promise<MLCEngine> {
  engine = await CreateMLCEngine("Llama-3.1-8B-Instruct-q4f16_1-MLC", {
    initProgressCallback: (report) => {
      onProgress(report.progress, report.text);
    },
    logLevel: "SILENT",
  });
 
  return engine;
}
 
// 스트리밍 채팅 완성
async function* chatStream(
  userMessage: string
): AsyncGenerator<string, void, unknown> {
  if (!engine) throw new Error("엔진이 초기화되지 않았습니다.");
 
  const chunks = await engine.chat.completions.create({
    messages: [
      { role: "system", content: "당신은 도움이 되는 한국어 AI 어시스턴트입니다." },
      { role: "user", content: userMessage },
    ],
    temperature: 0.7,
    max_tokens: 1024,
    stream: true,
  });
 
  for await (const chunk of chunks) {
    const delta = chunk.choices[0]?.delta?.content;
    if (delta) yield delta;
  }
}

// 캐시된 모델 목록 확인
async function listCachedModels(): Promise<string[]> {
  const cache = await caches.open("webllm/model");
  const keys = await cache.keys();
  return keys.map((req) => new URL(req.url).pathname);
}
 
// 특정 모델 캐시 삭제
async function clearModelCache(modelId: string): Promise<boolean> {
  const cache = await caches.open("webllm/model");
  const keys = await cache.keys();
  let deleted = false;
 
  for (const request of keys) {
    if (request.url.includes(modelId)) {
      await cache.delete(request);
      deleted = true;
    }
  }
 
  return deleted;
}

import { pipeline } from "@huggingface/transformers";
 
// 텍스트 분류 파이프라인
const classifier = await pipeline(
  "text-classification",
  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
  { device: "webgpu" }
);
 
const result = await classifier("This product is amazing!");
console.log(result); // [{ label: "POSITIVE", score: 0.9998 }]
 
// 텍스트 생성 파이프라인
const generator = await pipeline(
  "text-generation",
  "Xenova/Phi-3-mini-4k-instruct",
  { device: "webgpu", dtype: "q4" }
);
 
const output = await generator("Explain quantum computing in simple terms:", {
  max_new_tokens: 256,
});