WebAssembly & 엣지 컴퓨팅: 브라우저 AI 추론, Cloudflare Workers, IoT Wasm까지

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "add" (func $add)))

const memory = new WebAssembly.Memory({ initial: 1, maximum: 10 })
const buffer = new Uint8Array(memory.buffer)
// 오프셋 0부터 직접 읽기/쓰기
buffer[0] = 42

(import "wasi_snapshot_preview1" "fd_write"
  (func $fd_write (param i32 i32 i32 i32) (result i32)))

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

#[wasm_bindgen]
pub fn matrix_multiply(a: &[f32], b: &[f32], n: usize) -> Vec<f32> {
    let mut result = vec![0.0f32; n * n];
    for i in 0..n {
        for j in 0..n {
            for k in 0..n {
                result[i * n + j] += a[i * n + k] * b[k * n + j];
            }
        }
    }
    result
}

# wasm-pack 설치
cargo install wasm-pack

# 브라우저 타겟으로 빌드
wasm-pack build --target web

# Node.js 타겟으로 빌드
wasm-pack build --target nodejs

import init, { fibonacci, matrix_multiply } from './pkg/my_module.js'

async function main() {
  // Wasm 모듈 초기화
  await init()

  // Fibonacci 계산
  console.log(fibonacci(40)) // 102334155

  // 행렬 곱셈 (4x4)
  const a = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16])
  const b = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1])
  const result = matrix_multiply(a, b, 4)
  console.log(result)
}

main()

// assembly/index.ts
export function add(a: i32, b: i32): i32 {
  return a + b
}

export function sumArray(ptr: usize, len: i32): i64 {
  let sum: i64 = 0
  for (let i = 0; i < len; i++) {
    sum += load<i32>(ptr + i * 4)
  }
  return sum
}

# C 파일을 Wasm으로 컴파일
emcc compute.c -O3 -o compute.js \
  -s WASM=1 \
  -s EXPORTED_FUNCTIONS='["_process_image"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'

import * as ort from 'onnxruntime-web'

async function runInference() {
  // WebGPU 백엔드 우선, 폴백으로 Wasm 사용
  const session = await ort.InferenceSession.create('/models/bert-base.onnx', {
    executionProviders: ['webgpu', 'wasm'],
    graphOptimizationLevel: 'all',
  })

  // 입력 텐서 생성
  const inputIds = new BigInt64Array([101n, 2023n, 2003n, 102n])
  const attentionMask = new BigInt64Array([1n, 1n, 1n, 1n])

  const feeds = {
    input_ids: new ort.Tensor('int64', inputIds, [1, 4]),
    attention_mask: new ort.Tensor('int64', attentionMask, [1, 4]),
  }

  const results = await session.run(feeds)
  console.log('Logits:', results.logits.data)
}

async function webgpuMatmul(matA, matB, M, N, K) {
  const adapter = await navigator.gpu.requestAdapter()
  const device = await adapter.requestDevice()

  const shaderCode = `
    @group(0) @binding(0) var<storage, read> matA: array<f32>;
    @group(0) @binding(1) var<storage, read> matB: array<f32>;
    @group(0) @binding(2) var<storage, read_write> result: array<f32>;

    @compute @workgroup_size(8, 8)
    fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
      let row = gid.x;
      let col = gid.y;
      var sum = 0.0;
      for (var k = 0u; k < ${K}u; k++) {
        sum += matA[row * ${K}u + k] * matB[k * ${N}u + col];
      }
      result[row * ${N}u + col] = sum;
    }
  `

  const shaderModule = device.createShaderModule({ code: shaderCode })
  // ... 버퍼 생성, 파이프라인 설정, 디스패치
}

const context = await navigator.ml.createContext({ deviceType: 'gpu' })
const builder = new MLGraphBuilder(context)

const input = builder.input('input', { type: 'float32', dimensions: [1, 3, 224, 224] })
const weights = builder.constant(/* ... */)
const conv = builder.conv2d(input, weights, { padding: [1, 1, 1, 1] })
const relu = builder.relu(conv)

const graph = await builder.build({ output: relu })
const results = await context.compute(graph, inputs, outputs)

// Cloudflare Worker with AI binding
export default {
  async fetch(request, env) {
    const body = await request.json()
    const userMessage = body.message

    // AI 바인딩으로 LLM 추론
    const response = await env.AI.run('@cf/meta/llama-3.1-8b-instruct', {
      messages: [
        {
          role: 'system',
          content: 'You are a helpful assistant.',
        },
        {
          role: 'user',
          content: userMessage,
        },
      ],
      max_tokens: 512,
    })

    return new Response(JSON.stringify({ reply: response.response }), {
      headers: { 'Content-Type': 'application/json' },
    })
  },
}

name = "edge-ai-worker"
main = "src/index.js"
compatibility_date = "2024-09-23"

[ai]
binding = "AI"

use fastly::{Error, Request, Response};

#[fastly::main]
fn main(req: Request) -> Result<Response, Error> {
    let body = req.into_body_str();

    // Wasm 내에서 직접 처리
    let processed = process_with_wasm(&body);

    Ok(Response::from_body(processed))
}

fn process_with_wasm(input: &str) -> String {
    // 엣지에서 실행되는 비즈니스 로직
    format!("Processed at edge: {}", input.to_uppercase())
}

# WasmEdge 설치
curl -sSf https://raw.githubusercontent.com/WasmEdge/WasmEdge/master/utils/install.sh | bash

# Python 스크립트를 Wasm으로 실행
wasmedge --dir .:. python_wasm.wasm script.py

# script.py - WasmEdge 위에서 동작
import sys
import json

def process_sensor_data(data):
    temperature = data.get('temperature', 0)
    humidity = data.get('humidity', 0)

    # 이상 감지 로직
    if temperature > 80 or humidity > 90:
        return {'alert': True, 'reason': 'threshold_exceeded'}
    return {'alert': False, 'status': 'normal'}

data = json.loads(sys.argv[1])
result = process_sensor_data(data)
print(json.dumps(result))

최소 메모리 요구사항:
- Interpreter 모드: ~85KB ROM + ~64KB RAM
- AOT 모드: ~60KB ROM + ~64KB RAM

# spin.toml
spin_manifest_version = 2

[application]
name = "iot-processor"
version = "0.1.0"

[[trigger.http]]
route = "/sensor"
component = "sensor-handler"

[component.sensor-handler]
source = "target/wasm32-wasi/release/sensor_handler.wasm"
[component.sensor-handler.build]
command = "cargo build --target wasm32-wasi --release"

// Rust에서 Wasm SIMD 활용
#[cfg(target_arch = "wasm32")]
use std::arch::wasm32::*;

pub fn dot_product_simd(a: &[f32], b: &[f32]) -> f32 {
    let mut sum = f32x4_splat(0.0);
    let chunks = a.len() / 4;

    for i in 0..chunks {
        let va = v128_load(a[i*4..].as_ptr() as *const v128);
        let vb = v128_load(b[i*4..].as_ptr() as *const v128);
        sum = f32x4_add(sum, f32x4_mul(va, vb));
    }

    // 수평 합산
    let arr: [f32; 4] = unsafe { std::mem::transmute(sum) };
    arr.iter().sum()
}

// 공유 메모리로 Wasm 멀티스레딩
const sharedMemory = new WebAssembly.Memory({
  initial: 16,
  maximum: 256,
  shared: true, // SharedArrayBuffer 활성화
})

// Worker에 공유 메모리 전달
const worker = new Worker('wasm-worker.js')
worker.postMessage({ memory: sharedMemory })

<script src="https://cdn.jsdelivr.net/pyodide/v0.27.0/full/pyodide.js"></script>
<script>
  async function runPython() {
    const pyodide = await loadPyodide()

    // numpy, pandas를 브라우저에서 설치 및 사용
    await pyodide.loadPackage(['numpy', 'pandas'])

    const result = pyodide.runPython(`
    import numpy as np
    import pandas as pd

    # 브라우저에서 numpy 연산
    arr = np.random.randn(1000, 1000)
    eigenvalues = np.linalg.eigvals(arr[:10, :10])
    float(np.abs(eigenvalues).max())
  `)

    console.log('최대 고유값:', result)
  }
  runPython()
</script>