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