10장: 실전 프로젝트 — WebAssembly 애플리케이션 구축

mkdir -p image-service/{server,browser,shared}
cd image-service
 
# Spin 서버 프로젝트 생성
cd server
spin new -t http-rust image-api
 
# 브라우저 Wasm 라이브러리 생성
cd ../browser
cargo init --lib image-preview
 
# 공유 로직 라이브러리
cd ../shared
cargo init --lib image-core

/// RGBA 픽셀 배열에 세피아 필터를 적용합니다.
pub fn apply_sepia(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let r = chunk[0] as f32;
        let g = chunk[1] as f32;
        let b = chunk[2] as f32;
 
        chunk[0] = (0.393 * r + 0.769 * g + 0.189 * b).min(255.0) as u8;
        chunk[1] = (0.349 * r + 0.686 * g + 0.168 * b).min(255.0) as u8;
        chunk[2] = (0.272 * r + 0.534 * g + 0.131 * b).min(255.0) as u8;
    }
}
 
/// RGBA 픽셀 배열에 그레이스케일 필터를 적용합니다.
pub fn apply_grayscale(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let gray = (0.299 * chunk[0] as f32
            + 0.587 * chunk[1] as f32
            + 0.114 * chunk[2] as f32) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
    }
}
 
/// 가우시안 블러를 적용합니다.
pub fn apply_blur(pixels: &mut [u8], width: u32, height: u32, radius: u32) {
    let len = (width * height * 4) as usize;
    let mut output = vec![0u8; len];
 
    let r = radius as i32;
 
    for y in 0..height as i32 {
        for x in 0..width as i32 {
            let mut sum_r = 0u32;
            let mut sum_g = 0u32;
            let mut sum_b = 0u32;
            let mut count = 0u32;
 
            for dy in -r..=r {
                for dx in -r..=r {
                    let nx = x + dx;
                    let ny = y + dy;
 
                    if nx >= 0 && nx < width as i32 && ny >= 0 && ny < height as i32 {
                        let idx = ((ny as u32 * width + nx as u32) * 4) as usize;
                        sum_r += pixels[idx] as u32;
                        sum_g += pixels[idx + 1] as u32;
                        sum_b += pixels[idx + 2] as u32;
                        count += 1;
                    }
                }
            }
 
            let idx = ((y as u32 * width + x as u32) * 4) as usize;
            output[idx] = (sum_r / count) as u8;
            output[idx + 1] = (sum_g / count) as u8;
            output[idx + 2] = (sum_b / count) as u8;
            output[idx + 3] = pixels[idx + 3]; // alpha 유지
        }
    }
 
    pixels.copy_from_slice(&output);
}
 
/// 이미지를 리사이즈합니다 (최근접 이웃 보간).
pub fn resize(
    src: &[u8],
    src_w: u32,
    src_h: u32,
    dst_w: u32,
    dst_h: u32,
) -> Vec<u8> {
    let mut dst = vec![0u8; (dst_w * dst_h * 4) as usize];
    let x_ratio = src_w as f64 / dst_w as f64;
    let y_ratio = src_h as f64 / dst_h as f64;
 
    for y in 0..dst_h {
        for x in 0..dst_w {
            let sx = (x as f64 * x_ratio) as u32;
            let sy = (y as f64 * y_ratio) as u32;
 
            let src_idx = ((sy * src_w + sx) * 4) as usize;
            let dst_idx = ((y * dst_w + x) * 4) as usize;
 
            if src_idx + 3 < src.len() && dst_idx + 3 < dst.len() {
                dst[dst_idx..dst_idx + 4].copy_from_slice(&src[src_idx..src_idx + 4]);
            }
        }
    }
 
    dst
}
 
/// 지원하는 필터 유형
pub enum Filter {
    Sepia,
    Grayscale,
    Blur { radius: u32 },
}
 
/// 필터를 적용합니다.
pub fn apply_filter(pixels: &mut [u8], width: u32, height: u32, filter: Filter) {
    match filter {
        Filter::Sepia => apply_sepia(pixels),
        Filter::Grayscale => apply_grayscale(pixels),
        Filter::Blur { radius } => apply_blur(pixels, width, height, radius),
    }
}

use wasm_bindgen::prelude::*;
use image_core::{apply_filter, Filter};
 
#[wasm_bindgen]
pub struct ImagePreview {
    width: u32,
    height: u32,
    original: Vec<u8>,
    current: Vec<u8>,
}
 
#[wasm_bindgen]
impl ImagePreview {
    #[wasm_bindgen(constructor)]
    pub fn new(data: &[u8], width: u32, height: u32) -> Self {
        let original = data.to_vec();
        let current = data.to_vec();
        Self { width, height, original, current }
    }
 
    pub fn apply_sepia(&mut self) {
        self.current = self.original.clone();
        apply_filter(&mut self.current, self.width, self.height, Filter::Sepia);
    }
 
    pub fn apply_grayscale(&mut self) {
        self.current = self.original.clone();
        apply_filter(&mut self.current, self.width, self.height, Filter::Grayscale);
    }
 
    pub fn apply_blur(&mut self, radius: u32) {
        self.current = self.original.clone();
        apply_filter(
            &mut self.current,
            self.width,
            self.height,
            Filter::Blur { radius },
        );
    }
 
    pub fn reset(&mut self) {
        self.current = self.original.clone();
    }
 
    pub fn pixels_ptr(&self) -> *const u8 {
        self.current.as_ptr()
    }
 
    pub fn pixels_len(&self) -> usize {
        self.current.len()
    }
}

import init, { ImagePreview } from './pkg/image_preview.js';
 
async function main() {
    await init();
 
    const canvas = document.getElementById('preview-canvas');
    const ctx = canvas.getContext('2d');
 
    // 이미지 로드
    const img = new Image();
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
 
        const imageData = ctx.getImageData(0, 0, img.width, img.height);
        const preview = new ImagePreview(imageData.data, img.width, img.height);
 
        // 필터 버튼 이벤트
        document.getElementById('btn-sepia').addEventListener('click', () => {
            const start = performance.now();
            preview.apply_sepia();
            const elapsed = performance.now() - start;
            console.log(`Sepia filter: ${elapsed.toFixed(2)}ms`);
            updateCanvas(ctx, preview, img.width, img.height);
        });
 
        document.getElementById('btn-grayscale').addEventListener('click', () => {
            const start = performance.now();
            preview.apply_grayscale();
            const elapsed = performance.now() - start;
            console.log(`Grayscale filter: ${elapsed.toFixed(2)}ms`);
            updateCanvas(ctx, preview, img.width, img.height);
        });
 
        document.getElementById('btn-blur').addEventListener('click', () => {
            const start = performance.now();
            preview.apply_blur(3);
            const elapsed = performance.now() - start;
            console.log(`Blur filter: ${elapsed.toFixed(2)}ms`);
            updateCanvas(ctx, preview, img.width, img.height);
        });
 
        document.getElementById('btn-reset').addEventListener('click', () => {
            preview.reset();
            updateCanvas(ctx, preview, img.width, img.height);
        });
    };
    img.src = '/sample.jpg';
}
 
function updateCanvas(ctx, preview, width, height) {
    // Wasm 메모리에서 직접 픽셀 데이터 읽기
    const ptr = preview.pixels_ptr();
    const len = preview.pixels_len();
    const memory = new Uint8Array(preview.__wbg_ptr);
 
    const imageData = new ImageData(
        new Uint8ClampedArray(memory.buffer, ptr, len),
        width,
        height
    );
    ctx.putImageData(imageData, 0, 0);
}
 
main();

use spin_sdk::http::{IntoResponse, Request, Response, Method};
use spin_sdk::http_component;
use image_core::{apply_filter, resize, Filter};
use serde::{Deserialize, Serialize};
 
#[derive(Deserialize)]
struct ProcessRequest {
    filter: String,
    width: Option<u32>,
    height: Option<u32>,
    blur_radius: Option<u32>,
}
 
#[derive(Serialize)]
struct ProcessResponse {
    status: String,
    original_size: usize,
    processed_size: usize,
    processing_time_ms: f64,
}
 
#[http_component]
fn handle(req: Request) -> anyhow::Result<impl IntoResponse> {
    match (req.method(), req.path()) {
        (Method::Post, "/api/process") => process_image(req),
        (Method::Get, "/api/health") => health_check(),
        _ => Ok(Response::builder()
            .status(404)
            .header("content-type", "application/json")
            .body(r#"{"error":"Not Found"}"#)
            .build()),
    }
}
 
fn process_image(req: Request) -> anyhow::Result<Response> {
    let start = std::time::Instant::now();
 
    // 요청 파싱 (멀티파트 대신 간소화된 형태)
    let content_type = req.header("content-type")
        .and_then(|v| v.as_str().ok())
        .unwrap_or("");
 
    // 쿼리 파라미터에서 처리 옵션 추출
    let query = req.query();
    let filter_name = query.get("filter").map(|s| s.as_str()).unwrap_or("none");
    let target_width: Option<u32> = query.get("width").and_then(|s| s.parse().ok());
    let target_height: Option<u32> = query.get("height").and_then(|s| s.parse().ok());
    let blur_radius: u32 = query.get("blur_radius")
        .and_then(|s| s.parse().ok())
        .unwrap_or(3);
 
    let body = req.body().to_vec();
    let original_size = body.len();
 
    // 이미지 디코딩 (간소화 - 실제로는 image 크레이트 사용)
    let mut pixels = body.clone();
    let img_width: u32 = 800;  // 실제로는 헤더에서 추출
    let img_height: u32 = 600;
 
    // 필터 적용
    match filter_name {
        "sepia" => apply_filter(&mut pixels, img_width, img_height, Filter::Sepia),
        "grayscale" => apply_filter(&mut pixels, img_width, img_height, Filter::Grayscale),
        "blur" => apply_filter(
            &mut pixels,
            img_width,
            img_height,
            Filter::Blur { radius: blur_radius },
        ),
        _ => {}
    }
 
    // 리사이즈
    let result = if let (Some(w), Some(h)) = (target_width, target_height) {
        resize(&pixels, img_width, img_height, w, h)
    } else {
        pixels
    };
 
    let elapsed = start.elapsed().as_secs_f64() * 1000.0;
 
    let response = ProcessResponse {
        status: "ok".to_string(),
        original_size,
        processed_size: result.len(),
        processing_time_ms: elapsed,
    };
 
    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(serde_json::to_string(&response)?)
        .build())
}
 
fn health_check() -> anyhow::Result<Response> {
    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(r#"{"status":"ok","runtime":"spin-wasm"}"#)
        .build())
}

spin_manifest_version = 2
 
[application]
name = "image-service"
version = "1.0.0"
description = "WebAssembly-powered image processing service"
 
[[trigger.http]]
route = "/api/..."
component = "image-api"
 
[component.image-api]
source = "target/wasm32-wasip2/release/image_api.wasm"
allowed_outbound_hosts = []
 
[component.image-api.build]
command = "cargo component build --release"

# 빌드
cd server/image-api
spin build
 
# 로컬 테스트
spin up &
 
# 헬스 체크
curl http://localhost:3000/api/health
 
# 이미지 처리 테스트
curl -X POST http://localhost:3000/api/process?filter=sepia \
  --data-binary @test-image.raw \
  -H "Content-Type: application/octet-stream"
 
# Fermyon Cloud / Akamai Edge에 배포
spin deploy