在浏览器里就可以运行的本地AI模型 - 一键去除图片背景AI

前言

浏览器的功能越来越强大, 从Chrome 113 开始, 谷歌把WebGPU引入到了浏览器中, 通过WebGPU的API, 可以直接访问本机电脑的GPU资源. 既然GPU资源可以在浏览器里运行, 给AI模型推理等带来了便利, 使得一些AI模型可以直接在浏览器里运行.

本文主要介绍介绍以下WebGPU的基本概念和使用, 同时看一个可以在浏览器中运行的AI模型 - 一键去除图片背景的例子

WebGPU介绍

WebGPU是一种新兴的Web标准，旨在为现代图形和计算应用提供高性能、低功耗的API。它由W3C GPU for the Web社区小组开发，受到了Apple的Metal、Microsoft的DirectX 12和Khronos Group的Vulkan等现代图形API的启发。WebGPU专为现代图形硬件设计，通过显式的资源管理、多线程渲染和低开销的API调用，可以充分利用GPU的并行计算能力，实现比WebGL更高的性能。同时，它还支持自动功耗管理，可以根据设备的性能和功耗需求自动调整渲染质量，在移动设备和笔记本电脑上更加节能。

在易用性方面，WebGPU使用JavaScript和WebIDL作为编程接口，开发者可以使用熟悉的Web技术进行开发。此外，它还提供了一套统一的着色语言（WGSL），简化了跨平台开发的复杂性。在安全性上，WebGPU通过严格的资源验证和错误处理机制，确保了在浏览器环境中的安全运行。

WebGPU可以应用于各种Web场景，包括3D游戏、数据可视化、虚拟现实和增强现实以及机器学习和计算等。它为Web游戏提供高性能的图形渲染，使游戏在浏览器中运行得更加流畅；可以处理大量的数据点和几何体，为复杂的数据可视化应用提供强大的支持；还可以与WebXR API结合使用，为Web上的虚拟现实和增强现实应用提供高性能的图形渲染。

一个简单的WebGPU代码的例子

javascript 复制代码

// 引入WebGPU适配器和设备
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// 创建WebGPU上下文
const canvas = document.getElementById('webgpuCanvas');
const context = canvas.getContext('webgpu');

// 配置交换链格式
const swapChainFormat = 'bgra8unorm';
context.configure({
  device: device,
  format: swapChainFormat
});

// 顶点着色器代码
const vertexShaderCode = `
  @stage(vertex)
  fn main(@builtin(vertex_index) VertexIndex: u32) -> @builtin(position) vec4<f32> {
    var pos = array<vec2<f32>, 3>(
      vec2<f32>(0.0, 0.5),
      vec2<f32>(-0.5, -0.5),
      vec2<f32>(0.5, -0.5)
    );
    return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
  }
`;

// 片段着色器代码
const fragmentShaderCode = `
  @stage(fragment)
  fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0); // 红色
  }
`;

// 创建着色器模块
const vertexShaderModule = device.createShaderModule({
  code: vertexShaderCode
});
const fragmentShaderModule = device.createShaderModule({
  code: fragmentShaderCode
});

// 创建渲染管道
const pipeline = device.createRenderPipeline({
  vertex: {
    module: vertexShaderModule,
    entryPoint: 'main'
  },
  fragment: {
    module: fragmentShaderModule,
    entryPoint: 'main',
    targets: [
      {
        format: swapChainFormat
      }
    ]
  },
  primitive: {
    topology: 'triangle-list'
  }
});

// 渲染过程
const commandEncoder = device.createCommandEncoder();
const textureView = context.getCurrentTexture().createView();
const renderPassDescriptor = {
  colorAttachments: [
    {
      view: textureView,
      loadValue: [0.0, 0.0, 0.0, 1.0], // 背景颜色为黑色
      storeOp: 'store'
    }
  ]
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.draw(3, 1, 0, 0); // 绘制一个三角形
passEncoder.endPass();

// 提交命令
device.queue.submit([commandEncoder.finish()]);

上述的WebGPU代码, 一个基本的WebGPU程序，绘制了一个红色的三角形.

WebGPU运行AI模型的例子

首先, 通过JS运行AI模型, 需要使用Transformer.js, 它是一个 JavaScript 库，用于在浏览器中实现机器学习模型。它允许开发者轻松地在网页上部署和运行各种机器学习算法，包括分类、回归和聚类等。Transformer.js 通过 WebAssembly/WebGL/WebGPU 等技术，实现了高性能的计算，使得复杂的机器学习模型也能在浏览器中高效运行。

在HuggingFace上, 可以找到一个去除图片背景的例子, 它使用了Transformer.js库, 并开启了WebGPU支持:

Remove Background Web - a Hugging Face Space by Xenova

相关代码文件这边页提交到了CSDN代码库中, 你可以到这里查看相应的代码:

https://gitcode.com/u012416063/remove-background-web.git

提示, 你可以自己在本地部署上述的代码测试, 测试时需要注意, 目前WebGPU只能运行在https下面, 本地的ip地址可能会报错误. 同时, 需要确保你的Chrome浏览器版本大于113

打开网页可以看到如下的界面:

我们上传一张图片上去, 原始图片如下:

处理完成后:

可以看到效果非常不错, 整体速度也还行, 我这边4070显卡测试一般只需要数秒钟便可以处理完成, 对于普通的用户已经足够了.

总结

以上便是关于WebGPU和一个可以运行在浏览器中的去除图片背景的AI介绍, 如果你想了解更多关于AI, HTML打包加密等内容, 欢迎关注收藏.