WebAssembly + Rust trong React App: Tăng Tốc Compute-Heavy Tasks Thực Tế

# Cài Rust (nếu chưa có)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Cài wasm-pack - công cụ build WASM từ Rust
cargo install wasm-pack

# Kiểm tra
wasm-pack --version

# Tạo thư mục project
mkdir my-wasm-lib && cd my-wasm-lib
cargo init --lib

[package]
name = "my-wasm-lib"
version = "0.1.0"
edition = "2021"

[lib]
# Bắt buộc để compile sang WASM
crate-type = ["cdylib"]

[dependencies]
# Cầu nối giữa Rust và JavaScript
wasm-bindgen = "0.2"

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

// Export function này sang JS
#[wasm_bindgen]
pub fn grayscale(data: &[u8]) -> Vec<u8> {
    // Xử lý từng pixel theo định dạng RGBA
    let mut result = vec![0u8; data.len()];
    
    for i in (0..data.len()).step_by(4) {
        // Công thức tính độ sáng (luminance)
        let r = data[i] as f32;
        let g = data[i + 1] as f32;
        let b = data[i + 2] as f32;
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        
        result[i] = gray;
        result[i + 1] = gray;
        result[i + 2] = gray;
        result[i + 3] = data[i + 3]; // Giữ nguyên alpha
    }
    
    result
}

# Build WASM package
wasm-pack build --target web --out-dir ../react-app/src/wasm

// hooks/useImageProcessor.ts
import { useEffect, useRef, useState } from 'react';

// Lazy load WASM để không block initial render
const loadWasm = () => import('../wasm/my_wasm_lib');

export function useImageProcessor() {
  const wasmRef = useRef<any>(null);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    loadWasm().then(async (wasm) => {
      // Bắt buộc init trước khi dùng
      await wasm.default();
      wasmRef.current = wasm;
      setIsReady(true);
    });
  }, []);

  const processImage = async (imageData: ImageData): Promise<ImageData> => {
    if (!wasmRef.current) throw new Error('WASM chưa sẵn sàng');
    
    // Lấy raw pixel data (Uint8ClampedArray)
    const pixels = imageData.data;
    
    // Gọi Rust function - nhanh như native
    const processed = wasmRef.current.grayscale(pixels);
    
    // Trả về ImageData mới
    return new ImageData(
      new Uint8ClampedArray(processed),
      imageData.width,
      imageData.height
    );
  };

  return { processImage, isReady };
}

// components/CCCDProcessor.tsx
import { useRef } from 'react';
import { useImageProcessor } from '../hooks/useImageProcessor';

export function CCCDProcessor() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const { processImage, isReady } = useImageProcessor();

  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !isReady) return;

    const img = new Image();
    img.src = URL.createObjectURL(file);
    
    img.onload = async () => {
      const canvas = canvasRef.current!;
      const ctx = canvas.getContext('2d')!;
      
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      
      // Lấy pixel data từ canvas
      const imageData = ctx.getImageData(0, 0, img.width, img.height);
      
      // Xử lý bằng WASM - không block UI
      const processed = await processImage(imageData);
      ctx.putImageData(processed, 0, 0);
    };
  };

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        onChange={handleImageUpload}
        disabled={!isReady}
      />
      <canvas ref={canvasRef} />
    </div>
  );
}

// utils/benchmark.ts
export async function benchmarkProcessing(
  fn: () => Promise<void>,
  label: string,
  runs = 5
) {
  const times: number[] = [];
  
  for (let i = 0; i < runs; i++) {
    const start = performance.now();
    await fn();
    times.push(performance.now() - start);
  }
  
  const avg = times.reduce((a, b) => a + b) / runs;
  console.log(`${label}: trung bình ${avg.toFixed(1)}ms (${runs} lần chạy)`);
  return avg;
}

// workers/imageWorker.ts
import init, { grayscale, enhance_contrast } from '../wasm/my_wasm_lib';

// Khởi tạo WASM một lần khi worker load
let wasmReady = false;

async function ensureWasm() {
  if (!wasmReady) {
    await init();
    wasmReady = true;
  }
}

self.onmessage = async (e: MessageEvent) => {
  const { type, pixels, width, height } = e.data;
  
  await ensureWasm();
  
  let result: Uint8Array;
  
  switch (type) {
    case 'grayscale':
      result = grayscale(pixels);
      break;
    case 'enhance':
      result = enhance_contrast(pixels, 1.5); // factor 1.5
      break;
    default:
      self.postMessage({ error: 'Unknown type' });
      return;
  }
  
  // Dùng transferable objects để tránh copy data
  self.postMessage(
    { result, width, height },
    [result.buffer] // Transfer ownership, không copy
  );
};

// hooks/useWorkerProcessor.ts
import { useEffect, useRef } from 'react';

export function useWorkerProcessor() {
  const workerRef = useRef<Worker | null>(null);

  useEffect(() => {
    // Vite/webpack tạo worker URL tự động
    workerRef.current = new Worker(
      new URL('../workers/imageWorker.ts', import.meta.url),
      { type: 'module' }
    );
    
    return () => workerRef.current?.terminate();
  }, []);

  const processAsync = (imageData: ImageData, type: string) => {
    return new Promise<ImageData>((resolve, reject) => {
      const worker = workerRef.current!;
      
      worker.onmessage = (e) => {
        if (e.data.error) { reject(e.data.error); return; }
        resolve(new ImageData(
          new Uint8ClampedArray(e.data.result),
          e.data.width,
          e.data.height
        ));
      };
      
      // Transfer pixels để zero-copy
      const pixels = new Uint8ClampedArray(imageData.data);
      worker.postMessage(
        { type, pixels, width: imageData.width, height: imageData.height },
        [pixels.buffer]
      );
    });
  };

  return { processAsync };
}