作为 Web 开发人员，可能会遇到一项任务，该任务需要您利用本地 GPU 来提高应用程序性能。WebGPU 是一项尖端技术，有望改变我们在浏览器中处理机器学习工作负载的方式。
在本文中，我们将踏上探索 WebGPU 和机器学习的融合之旅，探索这种强大的组合如何在浏览器范围内加速 ML 工作负载。我们将深入研究 WebGPU 的机制，了解其对 GPU 计算的影响，并释放直接在 Web 应用程序中运行机器学习模型的潜力。
Web 图形和机器学习的演变
过去，图形和机器学习任务在很大程度上是独立的领域。
图形渲染主要由 GPU 处理，机器学习在传统 CPU 上执行。随着 Web 应用程序和用户体验的发展，出现了对图形和机器学习更无缝集成的需求，以提供更丰富、更具交互性的 Web 体验。
用户希望 Web 应用程序不仅能够显示视觉上令人惊叹的图形，而且还能够执行复杂的任务，例如实时图像识别、自然语言处理 （NLP） 和推荐系统。这需要利用 GPU 的巨大并行处理能力。
GPU 在加速训练和推理操作中的作用
机器学习工作流包括两个主要步骤：
- 训练：这是通过向 ML 模型提供标记数据集并调整其内部参数（权重和偏差）来最大程度地减少预测误差来调试 ML 模型的过程
- 推理：一旦机器学习模型经过训练，它就可以对新的、看不见的数据进行预测
GPU 在加速训练和推理操作方面发挥着至关重要的作用，尤其是神经网络。以下是 GPU 如何帮助更快、更高效的机器学习：
- 并行性：GPU 可以同时执行矩阵乘法和其他训练和推理中涉及的数学运算，从而大大加快了这些过程
- 性能：GPU 支持高吞吐量操作，使其适用于模型训练的数据密集型性质
- 模型部署：GPU 可用于移动和边缘设备中的设备端推理，从而实现实时、低延迟的预测
WebGPU 如何实现高效的 GPU 利用率
WebGPU 是一种新标准，可满足在 Web 开发中利用现代 GPU 功能的需求。它提供了一个 API，用于以 Web 友好的方式使用 GPU。WebGPU 让图形渲染和机器学习任务无缝协作，弥合这些传统上独立的领域之间的差距。
WebGPU 允许开发人员直接使用 JavaScript 或其他 Web 编程语言创建和管理图形管道、渲染命令和着色器，从而实现图形的高效 GPU 利用率。这带来了更流畅的动画、更逼真的 3D 图形和更好的整体用户体验。
WebGPU 不仅限于图形任务;它还使 Web 开发人员能够利用 GPU 的强大功能进行机器学习。借助 WebGPU，开发人员可以利用 GPU 的并行处理能力来加速神经网络计算。
WebGPU 加速 ML 的用例
WebGPU 为基于 Web 的 AI 应用开辟了令人兴奋的可能性。以下是一些 WebGPU 和 ML 组合可以大放异彩的实际用例：
- 实时对象检测：想象一下，一个可以直接在浏览器中执行实时对象检测的 Web 应用。WebGPU 的性能提升可实现更流畅、更快速的对象跟踪，使其适用于增强现实和视频会议等应用
- 自然语言处理：基于 Web 的聊天机器人和语言翻译服务可以从 WebGPU 加速中受益。复杂的 NLP 模型可以更高效地运行，从而实现更快的响应和改进的用户交互
- 交互式数据可视化：依靠 ML 可以提供更流畅、响应更灵敏的用户体验。WebGPU 有助于轻松渲染大型数据集和复杂的可视化效果
- 游戏和多媒体：WebGPU 不仅限于 ML 任务，还可用于图形密集型 Web 应用程序，如游戏和多媒体编辑器。将 ML 和 GPU 加速相结合可以带来更身临其境的体验。
实现：使用 WebGPU 加速 ML
在深入研究实现之前，确保您使用的是支持 WebGPU 的浏览器，这一点至关重要。在撰写本文时，Google Chrome Dev 和 Firefox 是实验性支持 WebGPU 的浏览器之一。
我在本教程中使用了 Google Chrome Dev，因此可以使用以下命令启动它并启用 WebGPU：
css
google-chrome-unstable --enable-unsafe-webgpu --enable-features=Vulkan,UseSkiaRenderer构建项目
在本节中，我们将使用 WebGPU 通过 TensorFlow.js 加载图像分类模型来预测特定图像显示的内容。为此，请创建一个 HTML 文件并粘贴以下代码：
html
<canvas id="webgpu-canvas" width="224" height="224"></canvas>
<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.1"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"> </script>
<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="https://i.imgur.com/DhAdgKs.jpg" crossorigin="anonymous"></img>
<div id="result">Predicted:</div>
<!-- HTML -->
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
// Define an async function to use await
async function init() {
// Check for WebGPU support
if (navigator.gpu) {
try {
const canvas = document.getElementById('webgpu-canvas');
const context = canvas.getContext('webgpu');
const device = await navigator.gpu.requestAdapter();
// const gpu = await device.requestGpu();
// The rest of your code for model loading and inference
const img = document.getElementById('img');
// Load the model.
const model = await mobilenet.load();
// Classify the image.
const predictions = await model.classify(img);
console.log('Predictions: ');
console.log(predictions);
// Display the result
document.getElementById('result').innerText = `Predicted: ${predictions[0].className}`;
} catch (error) {
console.error('WebGPU initialization error:', error);
}
} else {
console.error('WebGPU is not supported in this environment.');
}
}
//...
init();
</script>上面的代码演示了如何使用 WebGPU 通过 TensorFlow.js 中的预训练 MobileNet 模型进行机器学习推理。它由几个关键组件组成：HTML 元素、用于导入库的标签以及用于初始化 WebGPU、 <script> 加载模型和进行预测的 JavaScript。
HTML 部分首先定义一个具有 id of webgpu-canvas 和特定宽度和高度属性的 canvas 元素。此画布将用于渲染输出。该代码还包括一个占位符图像（具有允许图像读取的 CORS 设置）和一个 div 带有 id of result 的用于显示预测结果的图像。
HTML 文档中的 <script> 标签加载必要的库。首先，它使用 CDN 链接加载 TensorFlow.js;然后，它从 TensorFlow.js 加载 MobileNet 模型。该模型针对图像分类任务进行了预训练。
JavaScript 代码首先定义一个名为 init .此函数用于初始化和进一步的代码执行。它使用 navigator.gpu 检查 WebGPU 支持。如果支持 WebGPU，它会通过获取画布上下文、请求 GPU 适配器和加载 MobileNet 模型来初始化 WebGPU。
加载模型后，它会对提供的图像（由其 ID img 引用）进行分类。分类结果将记录到控制台中，并且预测的类标签在 . div result
当在浏览器上打开文件时，将看到以下预测：
结论
总之，WebGPU 和机器学习的结合代表了 Web 开发领域的强大进步。随着机器学习的不断发展，对更快、更高效的方式来处理 Web 应用程序中的 ML 负载的需求变得至关重要。
WebGPU 通过为开发人员提供对 GPU 资源的低级控制，并通过并行处理、平台独立性和增强的安全性提高性能，解决了以前基于 Web 的 GPU 技术的一些局限性。这些属性使 WebGPU 成为加速 Web 应用程序中 ML 负载的理想候选者。