@scienjoy/sj-ai-plus 1.0.5 → 1.0.7

package/ui/es/packages/components/src/utils/videoBackgroundRemoval.ts

@@ -1,8 +1,8 @@
-import { ref as h } from "vue";
-function E() {
-  const d = h(null), r = h(null);
-  let u = null, t = null, l = null, p = null, f = null, n = null, s = null;
-  const b = `
+import { ref as x } from "vue";
+function B() {
+  const g = x(null), o = x(null), u = x(!1), a = x(!1);
+  let c = null, e = null, l = null, p = null, v = null, s = null, d = null;
+  const y = `
         struct Uniforms {
             targetColor1: vec3f,
             threshold: f32,
@@ -23,7 +23,6 @@ function E() {
 
         @vertex
         fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-            // 全屏四边形顶点
             var pos = array<vec2f, 6>(
                 vec2f(-1.0, -1.0),
                 vec2f(1.0, -1.0),
@@ -35,7 +34,6 @@ function E() {
             
             var output: VertexOutput;
             output.position = vec4f(pos[vertexIndex], 0.0, 1.0);
-            // 翻转Y坐标以修正视频倒置问题
             output.texCoord = vec2f(
                 pos[vertexIndex].x * 0.5 + 0.5,
                 1.0 - (pos[vertexIndex].y * 0.5 + 0.5)
@@ -56,12 +54,12 @@ function E() {
             let rgb = color.rgb;
             let pixelSize = 1.0 / uniforms.resolution;
             
-            // 检查当前像素是否匹配目标色
+            // 主颜色匹配：直接透明
             if (matchesTargetColor(rgb)) {
                 return vec4f(0.0, 0.0, 0.0, 0.0);
             }
             
-            // 检查8个邻居（包括对角线）
+            // 8邻域检测：边缘像素透明（第一层侵蚀）
             let left = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(-pixelSize.x, 0.0)).rgb;
             let right = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(pixelSize.x, 0.0)).rgb;
             let top = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(0.0, -pixelSize.y)).rgb;
@@ -71,7 +69,6 @@ function E() {
             let bottomLeft = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(-pixelSize.x, pixelSize.y)).rgb;
             let bottomRight = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(pixelSize.x, pixelSize.y)).rgb;
             
-            // 第一层侵蚀：如果任意邻居匹配背景色，当前像素也变透明
             if (matchesTargetColor(left) || matchesTargetColor(right) || 
                 matchesTargetColor(top) || matchesTargetColor(bottom) ||
                 matchesTargetColor(topLeft) || matchesTargetColor(topRight) ||
@@ -79,147 +76,123 @@ function E() {
                 return vec4f(0.0, 0.0, 0.0, 0.0);
             }
             
-            // 第二层侵蚀：检查2像素距离的邻居
-            let left2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(-pixelSize.x * 2.0, 0.0)).rgb;
-            let right2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(pixelSize.x * 2.0, 0.0)).rgb;
-            let top2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(0.0, -pixelSize.y * 2.0)).rgb;
-            let bottom2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(0.0, pixelSize.y * 2.0)).rgb;
+            // 2像素邻域检测：第二层侵蚀，优化边缘
+            let left2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(-pixelSize.x * 4.0, 0.0)).rgb;
+            let right2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(pixelSize.x * 4.0, 0.0)).rgb;
+            let top2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(0.0, -pixelSize.y * 4.0)).rgb;
+            let bottom2 = textureSampleBaseClampToEdge(videoTexture, videoSampler, input.texCoord + vec2f(0.0, pixelSize.y * 4.0)).rgb;
             
             if (matchesTargetColor(left2) || matchesTargetColor(right2) || 
                 matchesTargetColor(top2) || matchesTargetColor(bottom2)) {
                 return vec4f(0.0, 0.0, 0.0, 0.0);
             }
             
-            // 不匹配且不在边缘 - 完全保留
+            // 非背景/非边缘像素：完全保留
             return vec4f(rgb, 1.0);
         }
     `;
-  function v(o) {
-    const e = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);
-    return e ? {
-      r: parseInt(e[1], 16),
-      g: parseInt(e[2], 16),
-      b: parseInt(e[3], 16)
+  function S(t) {
+    const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
+    return r ? {
+      r: parseInt(r[1], 16),
+      g: parseInt(r[2], 16),
+      b: parseInt(r[3], 16)
     } : { r: 0, g: 0, b: 0 };
   }
-  async function C(o) {
-    if (!navigator.gpu)
-      return console.error("WebGPU不受支持。请使用Chrome 113+或Edge 113+，或在chrome://flags中启用WebGPU"), !1;
+  const T = () => {
+    if (c && (cancelAnimationFrame(c), c = null), s && (s.destroy(), s = null), p && (p = null), d && (d = null), v && (v = null), l) {
+      try {
+        l.unconfigure();
+      } catch {
+      }
+      l = null;
+    }
+    e && (e.destroy(), e = null), u.value = !1, a.value = !1, console.log("✅ WebGPU资源已彻底销毁，可重新初始化");
+  };
+  async function h(t, r = 3) {
+    if (T(), !navigator.gpu)
+      return console.error("❌ WebGPU不受支持：请使用Chrome113+/Edge113+，或在chrome://flags中启用WebGPU"), !1;
+    if (!t)
+      return console.error("❌ WebGPU初始化失败：canvas节点不存在"), !1;
     try {
-      const e = await navigator.gpu.requestAdapter();
-      if (!e)
-        return console.error("无法获取WebGPU适配器"), !1;
-      if (t = await e.requestDevice(), l = o.getContext("webgpu"), !l)
-        return console.error("无法获取WebGPU上下文"), !1;
-      const i = navigator.gpu.getPreferredCanvasFormat();
+      const i = await navigator.gpu.requestAdapter({ powerPreference: "low-power" });
+      if (!i) throw new Error("获取GPU适配器失败");
+      if (e = await i.requestDevice(), !e) throw new Error("获取GPU设备失败");
+      if (l = t.getContext("webgpu"), !l) throw new Error("获取canvas的WebGPU上下文失败");
+      const n = navigator.gpu.getPreferredCanvasFormat();
       l.configure({
-        device: t,
-        format: i,
+        device: e,
+        format: n,
         alphaMode: "premultiplied"
+        // 透明背景核心配置
       });
-      const a = t.createShaderModule({
-        code: b
-      });
-      f = t.createSampler({
-        magFilter: "linear",
-        minFilter: "linear"
-      }), n = t.createBuffer({
+      const f = e.createShaderModule({ code: y });
+      v = e.createSampler({ magFilter: "linear", minFilter: "linear" }), s = e.createBuffer({
         size: 48,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-      }), s = t.createBindGroupLayout({
+      }), d = e.createBindGroupLayout({
         entries: [
-          {
-            binding: 0,
-            visibility: GPUShaderStage.FRAGMENT,
-            sampler: {}
-          },
-          {
-            binding: 1,
-            visibility: GPUShaderStage.FRAGMENT,
-            externalTexture: {}
-          },
-          {
-            binding: 2,
-            visibility: GPUShaderStage.FRAGMENT,
-            buffer: { type: "uniform" }
-          }
+          { binding: 0, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+          { binding: 1, visibility: GPUShaderStage.FRAGMENT, externalTexture: {} },
+          { binding: 2, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }
         ]
       });
-      const c = t.createPipelineLayout({
-        bindGroupLayouts: [s]
-      });
-      return p = t.createRenderPipeline({
-        layout: c,
-        vertex: {
-          module: a,
-          entryPoint: "vertexMain"
-        },
+      const C = e.createPipelineLayout({ bindGroupLayouts: [d] });
+      return p = e.createRenderPipeline({
+        layout: C,
+        vertex: { module: f, entryPoint: "vertexMain" },
         fragment: {
-          module: a,
+          module: f,
           entryPoint: "fragmentMain",
           targets: [{
-            format: i,
+            format: n,
             blend: {
-              color: {
-                srcFactor: "src-alpha",
-                dstFactor: "one-minus-src-alpha"
-              },
-              alpha: {
-                srcFactor: "one",
-                dstFactor: "one-minus-src-alpha"
-              }
+              color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
             }
           }]
         },
-        primitive: {
-          topology: "triangle-list"
-        }
-      }), console.log("WebGPU初始化成功"), !0;
-    } catch (e) {
-      return console.error("WebGPU初始化失败:", e), !1;
+        primitive: { topology: "triangle-list" }
+      }), u.value = !0, console.log("✅ WebGPU初始化成功"), !0;
+    } catch (i) {
+      return console.error(`❌ WebGPU初始化失败（剩余重试${r - 1}次）:`, i), r > 1 ? (await new Promise((n) => setTimeout(n, 500)), h(t, r - 1)) : (u.value = !1, !1);
     }
   }
-  function m() {
-    if (!d.value || !r.value || !t || !l || !p || !f || !n || !s)
+  function b() {
+    if (!u.value || !g.value || !o.value || !e || !l || !p || !v || !s || !d) {
+      a.value = !1;
       return;
-    const o = d.value, e = r.value;
-    if (o.readyState < o.HAVE_CURRENT_DATA) {
-      u = requestAnimationFrame(m);
+    }
+    const t = g.value, r = o.value;
+    if (t.readyState < t.HAVE_CURRENT_DATA) {
+      c = requestAnimationFrame(b);
       return;
     }
-    (e.width !== o.videoWidth || e.height !== o.videoHeight) && (e.width = o.videoWidth, e.height = o.videoHeight);
+    (r.width !== t.videoWidth || r.height !== t.videoHeight) && (r.width = t.videoWidth, r.height = t.videoHeight);
     try {
-      const i = t.importExternalTexture({
-        source: o
-      }), a = v("#0AFFFF"), c = v("#0AFFFF"), y = new Float32Array([
-        a.r / 255,
-        a.g / 255,
-        a.b / 255,
-        // targetColor1
+      const i = e.importExternalTexture({ source: t }), n = S("#0AFFFF"), f = S("#0AFFFF"), C = new Float32Array([
+        n.r / 255,
+        n.g / 255,
+        n.b / 255,
         0.4,
-        // threshold - 颜色相似度阈值
-        c.r / 255,
-        c.g / 255,
-        c.b / 255,
-        // targetColor2
+        f.r / 255,
+        f.g / 255,
+        f.b / 255,
         0,
-        // padding
-        e.width,
-        e.height,
-        // resolution
+        r.width,
+        r.height,
         0,
         0
-        // padding2
       ]);
-      t.queue.writeBuffer(n, 0, y);
-      const P = t.createBindGroup({
-        layout: s,
+      e.queue.writeBuffer(s, 0, C);
+      const U = e.createBindGroup({
+        layout: d,
         entries: [
-          { binding: 0, resource: f },
+          { binding: 0, resource: v },
           { binding: 1, resource: i },
-          { binding: 2, resource: { buffer: n } }
+          { binding: 2, resource: { buffer: s } }
         ]
-      }), x = t.createCommandEncoder(), g = x.beginRenderPass({
+      }), P = e.createCommandEncoder(), m = P.beginRenderPass({
         colorAttachments: [{
           view: l.getCurrentTexture().createView(),
           clearValue: { r: 0, g: 0, b: 0, a: 0 },
@@ -227,49 +200,48 @@ function E() {
           storeOp: "store"
         }]
       });
-      g.setPipeline(p), g.setBindGroup(0, P), g.draw(6), g.end(), t.queue.submit([x.finish()]);
+      m.setPipeline(p), m.setBindGroup(0, U), m.draw(6), m.end(), e.queue.submit([P.finish()]);
     } catch (i) {
-      console.error("WebGPU渲染帧错误:", i);
+      console.error("❌ WebGPU渲染帧错误:", i), a.value = !1;
+      return;
     }
-    u = requestAnimationFrame(m);
+    c = requestAnimationFrame(b);
   }
-  async function S() {
-    if (!d.value || !r.value) return;
-    if (!await C(r.value)) {
-      console.error("WebGPU初始化失败，请确保浏览器支持WebGPU");
+  async function G() {
+    if (!g.value || !o.value) {
+      console.error("❌ processVideo失败：video/canvas节点未绑定");
+      return;
+    }
+    if (a.value) return;
+    if (a.value = !0, !await h(o.value)) {
+      console.error("❌ WebGPU初始化重试耗尽，无法处理视频"), a.value = !1, u.value = !1;
       return;
     }
-    u = requestAnimationFrame(m);
+    c = requestAnimationFrame(b);
   }
-  function T() {
-    if (u !== null && (cancelAnimationFrame(u), u = null), r.value && (r.value.getContext("2d") || r.value.getContext("webgpu"))) {
-      if (l && t) {
-        const i = t.createCommandEncoder();
-        i.beginRenderPass({
-          colorAttachments: [{
-            view: l.getCurrentTexture().createView(),
-            clearValue: { r: 0, g: 0, b: 0, a: 0 },
-            loadOp: "clear",
-            storeOp: "store"
-          }]
-        }).end(), t.queue.submit([i.finish()]);
-      }
-      const e = r.value.getContext("2d");
-      if (e) {
-        e.clearRect(0, 0, r.value.width, r.value.height);
-        const i = r.value.width, a = r.value.height;
-        r.value.width = i, r.value.height = a;
+  function w() {
+    if (a.value = !1, u.value = !1, T(), o.value) {
+      const t = o.value.getContext("2d");
+      if (t) {
+        t.clearRect(0, 0, o.value.width, o.value.height);
+        const r = o.value.width, i = o.value.height;
+        o.value.width = r, o.value.height = i;
       }
     }
-    n && (n.destroy(), n = null), t = null, l = null, p = null, f = null, s = null;
+  }
+  async function F() {
+    return o.value ? await h(o.value, 3) : (console.error("❌ reInitWebGPU失败：canvas节点未绑定"), !1);
   }
   return {
-    videoRef: d,
-    canvasRef: r,
-    processVideo: S,
-    stopProcessing: T
+    videoRef: g,
+    canvasRef: o,
+    isInitSuccess: u,
+    isProcessing: a,
+    processVideo: G,
+    stopProcessing: w,
+    reInitWebGPU: F
   };
 }
 export {
-  E as default
+  B as default
 };