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

相关推荐
Brown.alexis1 小时前
es6知识点5-自备使用
前端·javascript·es6
杨利杰YJlio1 小时前
KB5121003更新详解:安全启动证书、AI组件、资源管理器与安装验证
前端·javascript·后端
紫菜猫一只1 小时前
Vue 3 与 React 常用写法对比
前端
jinggongszh1 小时前
使用AI协同开发产品条码规则功能——从“理解方案、原型、接口文档”到“落地真实前端代码”
前端·人工智能·mes系统·mes工程架构
渔夫正在掘金1 小时前
Cordis 中文教程:渐进式构建插件化应用
前端·node.js·ai编程
打呵欠的猫2 小时前
前端团队 3 个月 AI 实践复盘:哪些场景 ROI 最高,哪些是伪需求
前端·ai编程
gyx_这个杀手不太冷静2 小时前
高级前端开发职业规划(2026—2035)
前端·面试·agent
程序员黑豆2 小时前
Java中的null与NullPointerException完全指南:安全处理、实战排查与面试题
java·前端·ai编程
编程快车2 小时前
用 Phaser 4 造一个空间解谜游戏:纯函数棋盘引擎、透明画布分层与轻量双语
前端·程序员
可视之道3 小时前
前端图形编辑器的多选框架:从单选到框选到 Shift 连选
前端