graph LR
    A[摄像头/屏幕共享] --> B[WebCodecs VideoDecoder]
    B --> C[GPUExternalTexture]
    C --> D[Pre-process Compute Passes]
    D --> E[AI Inference (ONNX Runtime Web / WebNN)]
    E --> F[Post-process Compute Passes]
    F --> G[GPUExternalTexture / Texture]
    G --> H[WebCodecs VideoEncoder]
    H --> I[WebRTC Sender]

interface ComputePass {
  name: string;
  workgroupSize: [number, number, number];
  dispatch: (encoder: GPUComputePassEncoder, resources: ResourceBundle) => void;
}

class UnifiedPipeline {
  private passes: ComputePass[] = [];
  private device: GPUDevice;
  private bindGroupLayoutCache: Map<string, GPUBindGroupLayout> = new Map();

  addPass(pass: ComputePass) { this.passes.push(pass); }

  async process(input: GPUExternalTexture, output: GPUTexture) {
    const cmd = this.device.createCommandEncoder();
    const resources = new ResourceBundle(input, output, this.device);

    for (const pass of this.passes) {
      const bindGroup = this.getOrCreateBindGroup(pass, resources);
      const cpass = cmd.beginComputePass();
      cpass.setPipeline(await this.getPipeline(pass));
      cpass.setBindGroup(0, bindGroup);
      cpass.dispatchWorkgroups(...this.calcDispatch(pass, resources.outputSize));
      cpass.end();
    }
    this.device.queue.submit([cmd.finish()]);
  }
}

@group(0) @binding(0) var<storage, read>  input : texture_2d<f32>;
@group(0) @binding(1) var<storage, write> output : texture_2d<f32>;
@group(0) @binding(2) var<uniform> params: FilterParams;

@compute @workgroup_size(16, 16)
fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
  let coord = vec2<i32>(gid.xy);
  if (coord.x >= i32(params.width) || coord.y >= i32(params.height)) { return; }

  // 利用共享内存加载 5x5 邻域，减少全局内存带宽
  var<workgroup> tile: array<f32, 16*16>;
  // ... 协作加载 + 边界处理 ...
  workgroupBarrier();

  // 双边权重计算
  let center = tile[localIdx];
  var acc = 0.0; var wsum = 0.0;
  for (dy = -2; dy <= 2; dy++) {
    for (dx = -2; dx <= 2; dx++) {
      let n = tile[neighborIdx(dx, dy)];
      let w = exp(-(n - center)*(n - center) / params.sigmaR2) * spatialWeight[dx+2][dy+2];
      acc += n * w; wsum += w;
    }
  }
  output[coord] = vec4<f32>(acc / wsum, 0, 0, 1);
}

// 安全派发工具函数
function safeDispatch(device: GPUDevice, w: number, h: number, wgSize: [number, number]) {
  const limits = device.limits;
  const maxX = limits.maxComputeWorkgroupsPerDimension[0];
  const maxY = limits.maxComputeWorkgroupsPerDimension[1];
  const gx = Math.min(Math.ceil(w / wgSize[0]), maxX);
  const gy = Math.min(Math.ceil(h / wgSize[1]), maxY);
  return [gx, gy, 1] as const;
}

// 模型输出：Storage Buffer [1, C, H, W] (NCHW)
// 目标：纹理 [H, W] RGBA 通道打包 C=4 或 单通道 C=1
@group(0) @binding(0) var<storage, read> modelOut: array<f32>; // NCHW flat
@group(0) @binding(1) var<storage, write> texBuffer: array<vec4<f32>>; // HWCN flat (按 4 通道打包)

@compute @workgroup_size(256)
fn main(@builtin(global_invocation_id) gid: u32) {
  let C = params.channels; let H = params.height; let W = params.width;
  let hw = gid / (C / 4); // 每个 workitem 处理 4 通道
  if (hw >= H * W) return;
  
  let h = hw / W; let w = hw % W;
  let base = h * W + w; // NHWC 索引基址
  
  // NCHW -> NHWC (RGBA 打包) 仅通过索引计算，无额外指令
  texBuffer[gid] = vec4<f32>(
    modelOut[base + 0 * H * W],
    modelOut[base + 1 * H * W],
    modelOut[base + 2 * H * W],
    modelOut[base + 3 * H * W]
  );
}

// 融合 Pass：推理输出 -> Sigmoid -> 阈值 -> 3x3 腐蚀膨胀 -> 输出 Mask 纹理
@compute @workgroup_size(16, 16)
fn fusedPostProcess(@builtin(global_invocation_id) gid: vec3<u32>) {
  // 1. 读取模型输出 (假设已通过上述布局转换写入临时 Storage Texture)
  let logits = inputTexture.Load(coord);
  // 2. Sigmoid + Threshold
  let mask = select(0.0, 1.0, (1.0 / (1.0 + exp(-logits))) > params.threshold);
  // 3. 共享内存加载 3x3 邻域做形态学
  var<workgroup> smem: array<u32, 18*18>; // 含 halo
  // ... 协作加载 ...
  workgroupBarrier();
  // 4. 腐蚀/膨胀判断
  var isForeground = mask > 0.5;
  for (dy = -1; dy <= 1; dy++) for (dx = -1; dx <= 1; dx++) {
    if (params.op == ERODE) isForeground &= (smem[...] > 0);
    else isForeground |= (smem[...] > 0);
  }
  outputTexture.Store(coord, select(vec4(0), vec4(1), isForeground));
}

@group(0) @binding(0) var<uniform> qParams: QuantParams; // scale, zeroPoint
@group(0) @binding(1) var<texture> int8Tex: texture_2d<u32>; // 实为 rgba8unorm
fn dequant(packed: u32) -> vec4<f32> {
  let u = vec4<u32>((packed >> 0) & 0xFF, (packed >> 8) & 0xFF, (packed >> 16) & 0xFF, (packed >> 24) & 0xFF);
  return (vec4<f32>(u) - qParams.zeroPoint) * qParams.scale;
}

class ExternalTexturePool {
  private pool: Map<string, GPUExternalTexture[]> = new Map(); // key: sourceId (trackId/canvasId)
  private device: GPUDevice;

  acquire(source: VideoFrame | HTMLVideoElement | OffscreenCanvas): GPUExternalTexture {
    const id = this.getSourceId(source);
    let tex = this.pool.get(id)?.pop();
    if (!tex) tex = this.device.importExternalTexture({ source, colorSpace: 'srgb' });
    // 关键：绑定 VideoFrame.close() 回调自动归池，而非依赖 GC
    if (source instanceof VideoFrame) {
      source.close = (() => { const o = source.close; return () => { o.call(source); this.release(id, tex); }; })();
    }
    return tex;
  }
  release(id: string, tex: GPUExternalTexture) { this.pool.get(id)?.push(tex); }
}

interface SharedTextureExporter {
  export(texture: GPUTexture): Promise<SharedHandle>; // 统一返回 { type: 'dma-buf'|'nt-handle'|'io-surface', fd/handle, stride, offset }
  release(handle: SharedHandle): void;
}

// 使用示例：WebGPU Canvas -> WebCodecs VideoEncoder (同进程零拷贝)
const encoder = new VideoEncoder({ output: handleChunk, error: e => console.error(e) });
encoder.configure({ codec: 'avc1.42001e', width: 1920, height: 1080, bitrate: 5_000_000, hardwareAcceleration: 'prefer-hardware' });

const frame = new VideoFrame(canvas, { timestamp: performance.now() * 1000 }); // Chrome 104+ 支持 Canvas 直接构造 VideoFrame
encoder.encode(frame);
frame.close(); // 关键：及时释放引用，允许 Canvas 重绘

enum PipelineState { INIT, RUNNING, DEGRADED, RECOVERING, FATAL }

class ResilientPipeline {
  private state: PipelineState = INIT;
  private device: GPUDevice;
  private passes: ComputePass[];
  private fallbackPasses: ComputePass[]; // 纯 CPU/WASM 兜底版本

  async init() {
    this.device = await this.requestDeviceWithFallback();
    this.device.lost.then(info => this.onDeviceLost(info));
    await this.warmupPipelines();
    this.state = RUNNING;
  }

  private async onDeviceLost(info: GPUDeviceLostInfo) {
    if (this.state === RECOVERING) return; // 防抖
    this.state = RECOVERING;
    logger.warn('GPU Device Lost:', info.reason, info.message);

    // 1. 释放所有 GPU 资源
    this.releaseAllResources();
    
    // 2. 指数退避重建 Device (最多 3 次)
    for (let attempt = 1; attempt <= 3; attempt++) {
      await sleep(500 * attempt);
      try {
        this.device = await this.requestDeviceWithFallback();
        this.device.lost.then(i => this.onDeviceLost(i));
        await this.rebuildPipelines();
        this.state = RUNNING;
        logger.info('GPU Pipeline Recovered');
        return;
      } catch (e) { logger.error(`Recovery attempt ${attempt} failed`, e); }
    }
    
    // 3. 彻底失败：降级至 CPU 管线
    this.state = DEGRADED;
    this.activateCpuFallback();
    this.reportTelemetry('gpu_fatal_fallback_cpu');
  }
}

// 关键 Span 定义
const tracer = trace.getTracer('webgpu-pipeline');
const meter = metrics.getMeter('webgpu-pipeline');

// 指标
const frameLatency = meter.createHistogram('pipeline.frame.latency_ms', { unit: 'ms' });
const gpuMemUsage = meter.createObservableGauge('gpu.memory.usage_bytes', { callback: obs => obs.observe(getCurrentGPUMemory()) });
const fallbackActive = meter.createUpDownCounter('pipeline.fallback.active', { description: '1=CPU fallback active' });

// 每帧记录
function recordFrame(metrics: FrameMetrics) {
  frameLatency.record(metrics.totalMs, { 
    stage: 'total', 
    resolution: `${metrics.w}x${metrics.h}`, 
    device: metrics.gpuVendor 
  });
  // 子阶段耗时
  ['decode', 'preprocess', 'inference', 'postprocess', 'encode'].forEach(s => 
    frameLatency.record(metrics[s], { stage: s })
  );
}

# 目标产物
dist/
├── webgpu-pipeline.core.esm.js      # 核心管线 (Tree-shakable)
├── webgpu-pipeline.ai.onnx.wasm.js  # ONNX Runtime Web + WASM SIMD 后端
├── webgpu-pipeline.ai.webnn.js      # WebNN 后端 (实验性)
├── shaders/                         # 预编译 WGSL -> SPIRV/DXIL/MetalLib (可选)
│   ├── denoise.comp.spv
│   └── segmentation.comp.metallib
└── workers/
    └── pipeline.worker.js           # OffscreenCanvas + WebGPU 离主线程运行

{
  "flags": {
    "webgpu_pipeline_enabled": { "rollout": 10, "targeting": { "gpuVendor": ["NVIDIA", "AMD", "Apple"] } },
    "webnn_backend_enabled": { "rollout": 1, "targeting": { "os": "macOS", "browserVersion": ">=114" } },
    "int8_quantization_enabled": { "rollout": 50, "targeting": { "deviceMemory": ">4GB" } },
    "cpu_fallback_forced": { "rollout": 0 } // 紧急杀开关
  }
}