什么浏览器未来也能调用GPU运行AI模型?

什么浏览器未来也能调用GPU运行AI模型?

浏览器是我们日常生活中必不可少的工具之一,现在Ai大模型也开始慢慢的介入我们的生活。有很多专家训练好的模型,并不能运行在我们日常使用最多的浏览器中。

file

这意味着所有数据的处理都需要依赖开发Ai的服务器响应才能完成工作。使用的过程中你可能会与上千万的人同时争夺网络请求资源和漫长的响应时间。在一些场景中可以结合网络数据库跑本地算了,可以省下不少时间。

file

随着WebGPU的发布,浏览器可以释放设备的GPU能力来完成这些任务,从而显著提高性能。微软旗下的ONNX Runtime Web实现了一种可以在浏览器中运行AI模型的标准接口将其整合到WebGPU中。

梦兽编程认为基于NVIDIA AI 显卡提供Trt 技术实现

ONNX Runtime Web

ONNX Runtime Web 是一个 JavaScript 库,它允许开发者在网络浏览器中直接部署机器学习模型。这个库提供了多个后端支持,可以利用硬件加速来提高模型的运行性能。ONNX Runtime Web 的主要特点包括:

  1. 跨平台支持
  2. 在浏览器中提供高性能的机器学习推理使用了WebAssembly和WebGpu,WebAssembly在Cpu方面提供强劲算力,WebGpu则在Gpu方面。
  3. 模型转换和兼容性,会将多个机器学习框架都转成ONNX 格式统一标准。

快速上手

安装ONNX Runtime Web

csharp 复制代码
pnpm add onnxruntime-web

导入下载好的ONNX模型

目前下载ONNX模型市区有:ONNX Model Zoo、Microsoft Learn、PaddlePaddle 官方模型库、或者一些科研人员发布的论文中(因为还处于实验阶段)。

javascript 复制代码
import * as ort from 'onnxruntime-web';

fetch('path_to_your_model.onnx')
    .then(response => response.arrayBuffer())
    .then(buffer => {
        // 模型加载完成后的代码
        const modelBuffer = buffer;
        // 创建推理会话
        const session = new ort.InferenceSession(modelBuffer, (error) => {
            if (error) {
                console.error(error);
                return;
            }
            // 模型加载成功,可以进行推理
            console.log('Model loaded successfully');
        });
    });

准备输入数据

根据你的模型,准备输入数据。这通常涉及到创建一个与模型输入维度匹配的张量(Tensor)。

ini 复制代码
// 假设模型有一个输入,形状为 [1, 3, 224, 224]
const inputTensor = new ort.Tensor([1, 3, 224, 224], ort.float32);
// 填充输入数据,这里使用随机数据作为示例
for (let i = 0; i < inputTensor.length; i++) {
    inputTensor.data[i] = Math.random();
}

执行推理

使用加载的模型和准备好的输入数据执行推理。

ini 复制代码
const feeds = { inputName: inputTensor }; // 'inputName' 应替换为你的模型的实际输入名称
session.run(feeds).then(outputData => {
    // 输出数据处理
    console.log(outputData);
});

目前,适用于Mac、Windows、ChromeOS的Chrome 113和Edge 113以及适用于Android的Chrome 121默认已包含WebGPU。

这项技术虽然还处于早期阶段,但它为在浏览器中运行AI模型提供了新的可能性,尤其是在隐私保护方面,因为所有的计算都在本地完成,不需要服务器支持。

如果想了解更多前沿资讯关注梦兽编程哦!

本文使用 markdown.com.cn 排版

相关推荐
且白19 分钟前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研19 分钟前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
siwangqishiq244 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli1 小时前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i1 小时前
HTML5 拖放 API
前端·html
PasserbyX1 小时前
一句话解释JS链式调用
前端·javascript
1024小神1 小时前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano1 小时前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
小小小小宇1 小时前
前端定高和不定高虚拟列表
前端