什么浏览器未来也能调用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 排版

相关推荐
风象南22 分钟前
纯文本模型竟然也能直接“画图”,而且还很好用
前端·人工智能·后端
IT_陈寒40 分钟前
Vite vs Webpack:5个让你的开发效率翻倍的实战对比
前端·人工智能·后端
wuhen_n2 小时前
TypeScript 强力护航:PropType 与组件事件类型的声明
前端·javascript·vue.js
wuhen_n2 小时前
组件设计原则:如何设计一个高内聚、低耦合的 Vue 组件
前端·javascript·vue.js
Moment14 小时前
Vibe Coding 时代,到底该选什么样的工具来提升效率❓❓❓
前端·后端·github
IT_陈寒15 小时前
SpringBoot性能飙升200%?这5个隐藏配置你必须知道!
前端·人工智能·后端
小时前端15 小时前
React性能优化的完整方法论,附赠大厂面试通关技巧
前端·react.js
Nicko16 小时前
Jetpack Compose BOM 2026.02.01 解读与升级指南
前端
小蜜蜂dry16 小时前
nestjs学习 - 控制器、提供者、模块
前端·node.js·nestjs
优秀稳妥的JiaJi16 小时前
基于腾讯地图实现电子围栏绘制与校验
前端·vue.js·前端框架