Claude Code + WebAssembly图像处理：Rust到浏览器全链路实战

rustc --version && cargo --version && wasm-pack --version && claude --version

graph TB
    subgraph "开发阶段（Claude Code辅助）"
        A[CLAUDE.md<br/>项目配置] --> B[Rust Core<br/>lib.rs - 图像处理算法]
        A --> C[Cargo.toml<br/>WASM编译配置]
        B --> D[wasm-bindgen<br/>Rust↔JS桥接层]
        D --> E[wasm-pack build<br/>编译输出pkg/]
    end

    subgraph "运行时架构"
        F[HTML页面<br/>文件上传 + Canvas] --> G[JavaScript<br/>读取ImageData]
        G --> H{Web Worker}
        H -->|postMessage| I[WASM模块<br/>Rust编译的.wasm]
        I -->|处理结果| H
        H -->|结果回传| G
        G --> J[Canvas渲染<br/>显示处理后图像]
    end

    E --> I

    style A fill:#f9f,stroke:#333
    style I fill:#ff9,stroke:#333
    style J fill:#9f9,stroke:#333

mkdir wasm-image-lab && cd wasm-image-lab
claude

请帮我创建本项目的 CLAUDE.md 文件。这是一个 Rust + WebAssembly 图像处理项目，
要求包含以下指导信息：
- 本项目使用 wasm-pack 构建，target 是 web
- Rust 代码放在 src/lib.rs，是 cdylib 类型的库
- 依赖包括 wasm-bindgen, web-sys, js-sys, console_error_panic_hook
- 构建命令: wasm-pack build --target web --out-dir pkg
- 测试命令: wasm-pack test --chrome
- 代码风格：优先使用迭代器而非 for 循环，错误处理用 Result 而非 panic
- 前端使用原生 HTML/CSS/JS，不使用任何框架

# WASM Image Lab

高性能 WebAssembly 图像处理应用

## 构建命令
- 构建 WASM: `wasm-pack build --target web --out-dir pkg`
- 运行测试: `wasm-pack test --chrome`
- 本地预览: `python3 -m http.server 8080`

## 技术栈
- Rust (cdylib) → wasm-pack → WebAssembly
- wasm-bindgen + web-sys + js-sys
- 原生 HTML5 Canvas

## 代码规范
- 优先使用迭代器和函数式风格
- 所有公共 API 返回 Result 类型
- 使用 #[wasm_bindgen] 标注导出函数
- 使用 console_error_panic_hook 捕获 Rust panic

## 项目结构
src/lib.rs     - Rust 核心图像处理算法
pkg/           - wasm-pack 输出目录
www/           - 前端静态文件（HTML/JS/CSS）

请帮我初始化这个 Rust WASM 项目的 Cargo.toml 和 src/lib.rs。
项目名称 wasm-image-lab，crate-type 为 cdylib。
依赖：wasm-bindgen 0.2, web-sys 0.3 (features: HtmlCanvasElement, CanvasRenderingContext2d, ImageData, Window, Document), js-sys 0.3, console_error_panic_hook 0.1

[package]
name = "wasm-image-lab"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
console_error_panic_hook = "0.1"

[dependencies.web-sys]
version = "0.3"
features = [
    "HtmlCanvasElement",
    "CanvasRenderingContext2d",
    "ImageData",
    "Window",
    "Document",
]

[dev-dependencies]
wasm-bindgen-test = "0.3"

[profile.release]
opt-level = "z"     # 最小体积
lto = true          # 链接时优化
codegen-units = 1   # 单编译单元，更激进的优化

use wasm_bindgen::prelude::*;

// 安装 panic hook，让 Rust 的 panic 信息输出到浏览器控制台
#[wasm_bindgen(start)]
pub fn init() {
    console_error_panic_hook::set_once();
}

/// 像素数据结构：RGBA 四通道
#[derive(Clone, Copy)]
struct Pixel {
    r: u8,
    g: u8,
    b: u8,
    a: u8,
}

/// 从原始字节数组解析为像素向量
fn bytes_to_pixels(data: &[u8]) -> Vec<Pixel> {
    data.chunks_exact(4)
        .map(|chunk| Pixel {
            r: chunk[0],
            g: chunk[1],
            b: chunk[2],
            a: chunk[3],
        })
        .collect()
}

/// 像素向量转回字节数组
fn pixels_to_bytes(pixels: &[Pixel]) -> Vec<u8> {
    pixels.iter().flat_map(|p| [p.r, p.g, p.b, p.a]).collect()
}

请在 src/lib.rs 中实现以下四个图像处理函数，每个函数都导出为 #[wasm_bindgen]：

1. grayscale(input: &[u8], width: u32, height: u32) -> Vec<u8>
   - 使用 ITU-R BT.601 标准加权：0.299R + 0.587G + 0.114B
   - 保持 alpha 通道不变

2. gaussian_blur(input: &[u8], width: u32, height: u32, radius: u32) -> Vec<u8>
   - 使用可分离高斯核（先水平后垂直，复杂度从 O(r²) 降到 O(2r)）
   - 高斯权重用查表法预计算
   - 边界处理用镜像填充

3. sobel_edge(input: &[u8], width: u32, height: u32, threshold: u8) -> Vec<u8>
   - Sobel 3x3 算子检测边缘
   - 超过阈值的像素设为白色，否则黑色

4. adjust_brightness(input: &[u8], width: u32, height: u32, factor: f32) -> Vec<u8>
   - factor > 1.0 变亮，< 1.0 变暗
   - 使用 saturating_mul 和 saturating_add 防止溢出

注意：所有函数接收和返回原始 RGBA 字节数组，不使用 web-sys 类型。

/// 灰度化：BT.601 加权标准
#[wasm_bindgen]
pub fn grayscale(input: &[u8], width: u32, height: u32) -> Vec<u8> {
    let pixels = bytes_to_pixels(input);
    let output: Vec<Pixel> = pixels
        .iter()
        .map(|p| {
            let gray = (p.r as f32 * 0.299
                + p.g as f32 * 0.587
                + p.b as f32 * 0.114) as u8;
            Pixel { r: gray, g: gray, b: gray, a: p.a }
        })
        .collect();
    pixels_to_bytes(&output)
}

/// 可分离高斯模糊
#[wasm_bindgen]
pub fn gaussian_blur(input: &[u8], width: u32, height: u32, radius: u32) -> Vec<u8> {
    let pixels = bytes_to_pixels(input);
    let w = width as usize;
    let h = height as usize;
    let r = radius as usize;

    // 预计算高斯权重
    let sigma = radius as f32 / 3.0;
    let kernel_size = 2 * r + 1;
    let weights: Vec<f32> = (0..kernel_size)
        .map(|i| {
            let x = (i as isize - r as isize) as f32;
            (-x * x / (2.0 * sigma * sigma)).exp()
        })
        .collect();
    let weight_sum: f32 = weights.iter().sum();

    // 水平遍历
    let horizontal: Vec<Pixel> = (0..h)
        .flat_map(|y| {
            (0..w).map(move |x| {
                let (mut rr, mut gg, mut bb) = (0.0f32, 0.0f32, 0.0f32);
                for (k, &wt) in weights.iter().enumerate() {
                    let nx = (x as isize + k as isize - r as isize)
                        .clamp(0, w as isize - 1) as usize;
                    let idx = y * w + nx;
                    rr += pixels[idx].r as f32 * wt;
                    gg += pixels[idx].g as f32 * wt;
                    bb += pixels[idx].b as f32 * wt;
                }
                Pixel {
                    r: (rr / weight_sum) as u8,
                    g: (gg / weight_sum) as u8,
                    b: (bb / weight_sum) as u8,
                    a: pixels[y * w + x].a,
                }
            })
        })
        .collect();

    // 垂直遍历
    let result: Vec<Pixel> = (0..h)
        .flat_map(|y| {
            (0..w).map(move |x| {
                let (mut rr, mut gg, mut bb) = (0.0f32, 0.0f32, 0.0f32);
                for (k, &wt) in weights.iter().enumerate() {
                    let ny = (y as isize + k as isize - r as isize)
                        .clamp(0, h as isize - 1) as usize;
                    let idx = ny * w + x;
                    rr += horizontal[idx].r as f32 * wt;
                    gg += horizontal[idx].g as f32 * wt;
                    bb += horizontal[idx].b as f32 * wt;
                }
                Pixel {
                    r: (rr / weight_sum) as u8,
                    g: (gg / weight_sum) as u8,
                    b: (bb / weight_sum) as u8,
                    a: horizontal[y * w + x].a,
                }
            })
        })
        .collect();

    pixels_to_bytes(&result)
}

wasm-pack build --target web --out-dir pkg

[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
[INFO]: ⬇️  Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: ✨   Done in 3.2s
[INFO]: 📦   Your wasm pkg is ready to publish at ./pkg.

ls -lh pkg/
# wasm_image_lab.d.ts     - TypeScript 类型声明
# wasm_image_lab.js       - JS 胶水代码
# wasm_image_lab_bg.wasm  - 编译后的 WASM 二进制
# wasm_image_lab_bg.wasm.d.ts
# package.json

当前 WASM 文件体积偏大，请帮我：
1. 检查 Cargo.toml 的 [profile.release] 配置
2. 添加 wee_alloc 作为全局分配器替代系统默认
3. 在需要时使用 wasm-opt 进一步压缩

请在 www/ 目录下创建前端页面，包含：
1. index.html - 图片上传、滤镜选择、Canvas 展示
2. app.js - 加载 WASM 模块、读取图片到 Canvas、调用滤镜函数
3. style.css - 现代深色主题样式

功能要求：
- 支持拖拽上传图片
- 四个滤镜按钮：灰度化、高斯模糊(r=3)、边缘检测(threshold=50)、亮度调节(slider控制)
- 处理前后对比显示（原图 + 处理后）
- 显示处理耗时（毫秒）
- 处理过程中显示 loading 状态

import init, {
    grayscale,
    gaussian_blur,
    sobel_edge,
    adjust_brightness
} from '../pkg/wasm_image_lab.js';

let wasm = null;

async function loadWasm() {
    wasm = await init();
    document.getElementById('status').textContent = 'WASM 模块加载完成';
}

// 从 Canvas 获取像素数据
function getCanvasPixels(canvas) {
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    return new Uint8Array(imageData.data.buffer);
}

// 将处理结果写回 Canvas
function putPixelsToCanvas(canvas, pixels, width, height) {
    const ctx = canvas.getContext('2d');
    const imageData = new ImageData(
        new Uint8ClampedArray(pixels), width, height
    );
    ctx.putImageData(imageData, 0, 0);
}

// 通用滤镜处理函数
function applyFilter(filterFn, ...args) {
    const srcCanvas = document.getElementById('source');
    const dstCanvas = document.getElementById('result');
    const pixels = getCanvasPixels(srcCanvas);

    const t0 = performance.now();
    const result = filterFn(pixels, srcCanvas.width, srcCanvas.height, ...args);
    const elapsed = performance.now() - t0;

    putPixelsToCanvas(dstCanvas, result, srcCanvas.width, srcCanvas.height);
    document.getElementById('timer').textContent = `${elapsed.toFixed(2)} ms`;
}

// 绑定按钮事件
document.getElementById('btn-gray').addEventListener('click', () => {
    applyFilter(grayscale);
});

document.getElementById('btn-blur').addEventListener('click', () => {
    applyFilter(gaussian_blur, 3); // radius = 3
});

document.getElementById('btn-edge').addEventListener('click', () => {
    applyFilter(sobel_edge, 50); // threshold = 50
});

document.getElementById('btn-brightness').addEventListener('input', (e) => {
    const factor = parseFloat(e.target.value);
    applyFilter(adjust_brightness, factor);
});

loadWasm();

请将图像处理逻辑改为 Web Worker 方案：
1. 创建 www/worker.js 作为 Worker 线程
2. Worker 内部加载并初始化 WASM 模块
3. 主线程通过 postMessage 发送像素数据和处理类型
4. Worker 处理完毕后 postMessage 回传结果
5. 使用 Transferable Objects (ArrayBuffer transfer) 避免数据拷贝

// worker.js
import init, { grayscale, gaussian_blur, sobel_edge, adjust_brightness } 
    from '../pkg/wasm_image_lab.js';

let ready = false;

init().then(() => { ready = true; });

self.onmessage = function(e) {
    const { pixels, width, height, filter, params, id } = e.data;

    if (!ready) {
        self.postMessage({ error: 'WASM not ready', id });
        return;
    }

    const t0 = performance.now();
    let result;

    switch(filter) {
        case 'grayscale':
            result = grayscale(pixels, width, height);
            break;
        case 'blur':
            result = gaussian_blur(pixels, width, height, params.radius);
            break;
        case 'edge':
            result = sobel_edge(pixels, width, height, params.threshold);
            break;
        case 'brightness':
            result = adjust_brightness(pixels, width, height, params.factor);
            break;
    }

    const elapsed = performance.now() - t0;

    // 使用 Transferable 零拷贝传输
    self.postMessage(
        { result: result.buffer, elapsed, id }, 
        [result.buffer]
    );
};

// 主线程调用
const worker = new Worker('./worker.js', { type: 'module' });

function applyFilterAsync(filter, params = {}) {
    const srcCanvas = document.getElementById('source');
    const pixels = getCanvasPixels(srcCanvas);
    const id = Date.now();

    worker.postMessage({
        pixels,
        width: srcCanvas.width,
        height: srcCanvas.height,
        filter,
        params,
        id
    });
}

worker.onmessage = function(e) {
    const { result, elapsed, id } = e.data;
    const dstCanvas = document.getElementById('result');
    const pixels = new Uint8Array(result);
    putPixelsToCanvas(dstCanvas, pixels, dstCanvas.width, dstCanvas.height);
    document.getElementById('timer').textContent = `${elapsed.toFixed(2)} ms`;
};

sequenceDiagram
    participant User as 用户操作
    participant Main as 主线程(UI)
    participant Worker as Web Worker
    participant WASM as WASM模块

    User->>Main: 选择滤镜
    Main->>Main: getImageData()
    Main->>Worker: postMessage({pixels, filter})
    Note over Main,Worker: Transferable ArrayBuffer<br/>零拷贝传输
    Worker->>WASM: grayscale(pixels, w, h)
    WASM-->>Worker: Vec<u8>结果
    Worker-->>Main: postMessage({result})
    Note over Worker,Main: Transferable ArrayBuffer<br/>零拷贝回传
    Main->>Main: putImageData()
    Main->>User: 显示结果+耗时

请帮我创建一个性能基准测试页面 www/benchmark.html：
1. 同时用纯 JavaScript 和 WASM 分别执行四个滤镜
2. 在同一张测试图片上运行 10 次取平均值
3. 用柱状图对比显示 WASM vs JS 的处理时间
4. 显示加速倍数（speedup ratio）

JavaScript 参考实现也要包含：灰度化、高斯模糊、边缘检测、亮度调节。
确保算法逻辑与 Rust 版本一致，以便公平对比。

当前高斯模糊性能是 JS 的 4x，不够理想。请分析并优化：
1. 使用 unsafe 块和裸指针替代安全的 Vec 索引
2. 考虑 SIMD 指令加速（wasm-simd feature）
3. 使用 lookup table 预计算权重
4. 确保内存访问是连续的（cache-friendly）

# Cargo.toml 启用 SIMD
[target.'cfg(target_arch = "wasm32")'.dependencies]

# 构建时启用 SIMD
# RUSTFLAGS="-C target-feature=+simd128" wasm-pack build --target web

请帮我配置 Vercel 部署：
1. 创建 vercel.json 配置静态站点
2. 设置构建命令为先运行 wasm-pack build，然后复制 pkg/ 到 www/
3. 输出目录为 www/
4. 正确设置 .wasm 文件的 Content-Type: application/wasm

{
  "buildCommand": "wasm-pack build --target web --out-dir pkg && cp -r pkg www/pkg",
  "outputDirectory": "www",
  "headers": [
    {
      "source": "/pkg/(.*)\\.wasm",
      "headers": [
        { "key": "Content-Type", "value": "application/wasm" },
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

{
  "buildCommand": "wasm-pack build --target web --out-dir pkg && cp -r pkg www/pkg",
  "outputDirectory": "www"
}

# 1. 构建
wasm-pack build --target web --out-dir pkg

# 2. 复制到 www 目录并启动服务
cp -r pkg www/ && cd www && python3 -m http.server 8080

wasm-image-lab/
├── CLAUDE.md                    # Claude Code 项目配置
├── Cargo.toml                   # Rust 项目配置
├── src/
│   └── lib.rs                   # Rust 核心算法 + WASM 导出
├── pkg/                         # wasm-pack 输出（构建生成）
│   ├── wasm_image_lab.js
│   ├── wasm_image_lab_bg.wasm
│   ├── wasm_image_lab.d.ts
│   └── package.json
├── www/                         # 前端静态文件
│   ├── index.html               # 主页面
│   ├── app.js                   # 主逻辑（可选Worker版）
│   ├── worker.js                # Web Worker（可选）
│   ├── benchmark.html           # 性能基准测试页
│   ├── style.css                # 样式
│   └── pkg/ -> ../pkg           # 构建后复制
├── vercel.json                  # Vercel 部署配置
└── tests/
    └── web.rs                   # wasm-bindgen-test 测试

// tests/web.rs
use wasm_bindgen_test::*;

#[wasm_bindgen_test]
fn test_grayscale() {
    let input = vec![255, 0, 0, 255, 0, 255, 0, 255]; // 红色 + 绿色
    let result = wasm_image_lab::grayscale(&input, 2, 1);

    // BT.601: 红 → 0.299*255 ≈ 76, 绿 → 0.587*255 ≈ 150
    assert_eq!(result[0], 76);  // 红像素的灰度值
    assert_eq!(result[4], 150); // 绿像素的灰度值
    assert_eq!(result[3], 255); // alpha 不变
}

#[wasm_bindgen_test]
fn test_brightness_increase() {
    let input = vec![100, 100, 100, 255];
    let result = wasm_image_lab::adjust_brightness(&input, 1, 1, 1.5);
    assert_eq!(result[0], 150); // 100 * 1.5
    assert_eq!(result[3], 255); // alpha 不变
}

#[wasm_bindgen_test]
fn test_brightness_saturate() {
    let input = vec![200, 200, 200, 255];
    let result = wasm_image_lab::adjust_brightness(&input, 1, 1, 2.0);
    assert_eq!(result[0], 255); // 200*2=400 → saturate to 255
}

wasm-pack test --chrome --headless

flowchart LR
    A[需求：图像滤镜] --> B[Claude Code<br/>创建CLAUDE.md]
    B --> C[Claude Code<br/>生成Cargo.toml + lib.rs]
    C --> D[Claude Code<br/>实现算法]
    D --> E[wasm-pack build]
    E --> F{编译成功?}
    F -->|失败| G[Claude Code<br/>修复错误]
    G --> E
    F -->|成功| H[Claude Code<br/>生成前端页面]
    H --> I[本地预览测试]
    I --> J{性能达标?}
    J -->|否| K[Claude Code<br/>优化算法/SIMD]
    K --> E
    J -->|是| L[Claude Code<br/>配置部署]
    L --> M[Vercel/Netlify<br/>发布上线]

    style B fill:#f9f,stroke:#333
    style D fill:#f9f,stroke:#333
    style G fill:#f9f,stroke:#333
    style K fill:#f9f,stroke:#333

运行 cargo check 后有以下编译错误：
[粘贴错误信息]

请修复，注意不要改变函数签名和算法逻辑。

第一步：先只实现 grayscale 函数，写完后我运行 wasm-pack build 验证
第二步：基于第一步验证通过的代码，添加 gaussian_blur
第三步：添加 sobel_edge
第四步：添加 adjust_brightness

wasm-opt -Oz -o output.wasm input.wasm

请帮我配置 wasm-pack 的构建流程，在构建后自动运行 wasm-opt -Oz 压缩。
如果系统没有 wasm-opt，给出安装方法。

基于现有的 gaussian_blur 实现，请添加一个 median_filter 函数：
- 使用 3x3 窗口
- 对窗口内的像素值排序取中位数
- 遵循现有代码风格（Pixel结构体、bytes_to_pixels/pixels_to_bytes）