WebGPU, 드디어 모든 브라우저에서 사용 가능해지다

// WebGL: 전역 상태를 계속 변경
gl.bindBuffer(gl.ARRAY_BUFFER, buffer1)
gl.bindTexture(gl.TEXTURE_2D, texture1)
gl.useProgram(program1)
gl.drawArrays(gl.TRIANGLES, 0, 3) // 이 시점의 "현재 상태"로 그림

gl.bindBuffer(gl.ARRAY_BUFFER, buffer2) // 상태 변경
gl.bindTexture(gl.TEXTURE_2D, texture2) // 또 변경
gl.useProgram(program2) // 또 변경
gl.drawArrays(gl.TRIANGLES, 0, 3) // 바뀐 상태로 그림

// WebGPU: 명령을 기록하고 한 번에 제출
const commandEncoder = device.createCommandEncoder()

const pass1 = commandEncoder.beginRenderPass(renderPassDescriptor1)
pass1.setPipeline(pipeline1) // 미리 컴파일된 파이프라인
pass1.setBindGroup(0, bindGroup1) // 리소스 묶음
pass1.draw(3)
pass1.end()

const pass2 = commandEncoder.beginRenderPass(renderPassDescriptor2)
pass2.setPipeline(pipeline2)
pass2.setBindGroup(0, bindGroup2)
pass2.draw(3)
pass2.end()

// 모든 명령을 한 번에 GPU로 전송
device.queue.submit([commandEncoder.finish()])

// JavaScript에서 WGSL 셰이더를 문자열로 전달
const shaderCode = `
  @group(0) @binding(0) var<storage, read> input_a: array<f32>;
  @group(0) @binding(1) var<storage, read> input_b: array<f32>;
  @group(0) @binding(2) var<storage, read_write> output: array<f32>;

  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) id: vec3<u32>) {
    let index = id.x;
    output[index] = input_a[index] + input_b[index];
  }
`

// GPU에서 셰이더 컴파일
const shaderModule = device.createShaderModule({code: shaderCode})

// 파이프라인 생성 및 실행
const pipeline = device.createComputePipeline({
  layout: 'auto',
  compute: {module: shaderModule, entryPoint: 'main'},
})

npm install @tensorflow/tfjs @tensorflow/tfjs-backend-webgpu

npm install @huggingface/transformers

npm install onnxruntime-web

npm init -y
npm install @tensorflow/tfjs @tensorflow/tfjs-backend-webgpu

import * as tf from '@tensorflow/tfjs'
import '@tensorflow/tfjs-backend-webgpu'

async function initWebGPU() {
  // WebGPU 지원 여부 확인
  if (!navigator.gpu) {
    console.error('WebGPU not supported')
    return false
  }

  // WebGPU 백엔드 설정
  await tf.setBackend('webgpu')
  await tf.ready()

  console.log('Backend:', tf.getBackend()) // 'webgpu'
  return true
}

async function benchmark() {
  const size = 1024

  // 큰 행렬 생성
  const a = tf.randomNormal([size, size])
  const b = tf.randomNormal([size, size])

  // 워밍업 (첫 실행은 컴파일 시간 포함)
  const warmup = tf.matMul(a, b)
  await warmup.data()
  warmup.dispose()

  // 실제 벤치마크
  const iterations = 10
  const start = performance.now()

  for (let i = 0; i < iterations; i++) {
    const result = tf.matMul(a, b)
    await result.data() // GPU 연산 완료 대기
    result.dispose()
  }

  const elapsed = performance.now() - start
  console.log(`${size}x${size} matmul: ${(elapsed / iterations).toFixed(2)}ms`)

  // 메모리 정리
  a.dispose()
  b.dispose()
}

import * as tf from '@tensorflow/tfjs'
import '@tensorflow/tfjs-backend-webgpu'

async function classifyImage(imageElement: HTMLImageElement) {
  // WebGPU 초기화
  await tf.setBackend('webgpu')
  await tf.ready()

  // MobileNet 모델 로드
  const model = await tf.loadGraphModel(
    'https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v3_small_100_224/classification/5/default/1',
    {fromTFHub: true},
  )

  // 이미지 전처리
  const tensor = tf.browser
    .fromPixels(imageElement)
    .resizeBilinear([224, 224])
    .expandDims(0)
    .div(255.0)

  // Inference
  const start = performance.now()
  const predictions = model.predict(tensor) as tf.Tensor
  const data = await predictions.data()
  const elapsed = performance.now() - start

  console.log(`Inference time: ${elapsed.toFixed(2)}ms`)

  // Top 5 예측 결과
  const top5 = Array.from(data)
    .map((prob, i) => ({index: i, prob}))
    .sort((a, b) => b.prob - a.prob)
    .slice(0, 5)

  // 메모리 정리
  tensor.dispose()
  predictions.dispose()

  return {top5, inferenceTime: elapsed}
}

async function compareBackends() {
  const backends = ['webgl', 'webgpu']
  const results: Record<string, number> = {}

  for (const backend of backends) {
    try {
      await tf.setBackend(backend)
      await tf.ready()

      const size = 512
      const a = tf.randomNormal([size, size])
      const b = tf.randomNormal([size, size])

      // 워밍업
      const warmup = tf.matMul(a, b)
      await warmup.data()
      warmup.dispose()

      // 벤치마크
      const start = performance.now()
      for (let i = 0; i < 20; i++) {
        const r = tf.matMul(a, b)
        await r.data()
        r.dispose()
      }
      results[backend] = (performance.now() - start) / 20

      a.dispose()
      b.dispose()
    } catch (e) {
      console.log(`${backend} not available`)
    }
  }

  console.table(results)
}

import {pipeline} from '@huggingface/transformers'

async function generateEmbeddings(texts: string[]) {
  // 임베딩 파이프라인 생성 (WebGPU 사용)
  const extractor = await pipeline(
    'feature-extraction',
    'Xenova/all-MiniLM-L6-v2',
    {device: 'webgpu'},
  )

  const start = performance.now()

  // 임베딩 생성
  const output = await extractor(texts, {
    pooling: 'mean',
    normalize: true,
  })

  const elapsed = performance.now() - start
  console.log(`${texts.length} texts embedded in ${elapsed.toFixed(2)}ms`)

  return output.tolist()
}

// 사용 예시
const texts = ['오늘 날씨가 좋다', '날씨가 화창하다', '주식 시장이 하락했다']

const embeddings = await generateEmbeddings(texts)

// 코사인 유사도 계산
function cosineSimilarity(a: number[], b: number[]) {
  const dot = a.reduce((sum, val, i) => sum + val * b[i], 0)
  const normA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0))
  const normB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0))
  return dot / (normA * normB)
}

console.log('날씨 문장 유사도:', cosineSimilarity(embeddings[0], embeddings[1]))
console.log('다른 주제 유사도:', cosineSimilarity(embeddings[0], embeddings[2]))

import {pipeline} from '@huggingface/transformers'

async function classifyImage(imageUrl: string) {
  // 이미지 분류 파이프라인 생성 (WebGPU 사용)
  const classifier = await pipeline(
    'image-classification',
    'Xenova/vit-base-patch16-224',
    {device: 'webgpu'},
  )

  // 분류 실행
  const results = await classifier(imageUrl, {topk: 5})

  // 결과: [{label: 'golden retriever', score: 0.95}, ...]
  return results
}

// 사용 예시
const results = await classifyImage('/path/to/image.jpg')
console.log(results[0].label) // 가장 높은 확률의 라벨
console.log(results[0].score) // 확률 (0~1)

# TensorFlow.js
npm install @tensorflow/tfjs @tensorflow/tfjs-backend-webgpu

# Transformers.js
npm install @huggingface/transformers