在浏览器里就可以运行的本地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代码的例子

// 引入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

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