前言
浏览器的功能越来越强大, 从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打包加密等内容, 欢迎关注收藏.