在浏览器里就可以运行的本地AI模型 - 一键去除图片背景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

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

我们上传一张图片上去, 原始图片如下:

处理完成后:

可以看到效果非常不错, 整体速度也还行, 我这边4070显卡测试一般只需要数秒钟便可以处理完成, 对于普通的用户已经足够了.

总结

以上便是关于WebGPU和一个可以运行在浏览器中的去除图片背景的AI介绍, 如果你想了解更多关于AI, HTML打包加密等内容, 欢迎关注收藏.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57885.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端开发入门】JavaScript快速入门--js变量

目录 引言一、为什么要定义变量二、定义变量的一些技巧1. 解构赋值1.1 Object解构赋值1.2 Array解构赋值1.3 总结规律 2. 字符串拼接 三、变量作用域四、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容&#xf…

uniapp 发起post和get请求!uni.request(OBJECT)

在uni-app中&#xff0c;发起HTTP请求主要通过uni.request方法实现。 Get请求 使用uni.request请求api&#xff0c;并且将 method参数设置为GET&#xff0c;有参数的话直接data&#xff1a;{}传递&#xff0c; success是请求成功回调函数&#xff0c;fail是失败函数 <but…

ipv6地址子网划分

IPv6 从左至右一共有8段地址,每一段用16进制表示&#xff0c;共128位。 例如&#xff1a;2001:0DB8:0001:0000:0000:0000:0000:0000 每一段的子网掩码如下&#xff1a; 第1段的掩码为是 0~16 01616 第2段的掩码为是 17~32 161632 第3段的掩码为是 33~48 …

QQ音乐绿钻音效+DTS音效解锁

​ 工具 mt管理器 simplehook QQ音乐&#xff08;自行下载&#xff09; DTS音效修改方法&#xff1a;com.tencent.qqmusic.business.user.a.r1 赋值为1 绿钻音效修改方法&#xff1a; com.tencent.qqmusic.business.user.a.q1 赋值为1 建议使用hook实现&#xff0c;这里贴上si…

动态IP是什么?

随着互联网成为人们生活的重要组成部分&#xff0c;以信息传递为主导的时代种&#xff0c;网络连接质量对我们的工作效率、学习进度以及娱乐体验等方面都有很大影响。 动态IP&#xff0c;作为网络连接中的一种重要IP代理形式&#xff0c;越来越受到用户的欢迎。本文将深入解析…

关于 Linux 内核“合规要求”与俄罗斯制裁的一些澄清

原文&#xff1a;Michael Larabel - 2024.10.24 当 一些俄罗斯的 Linux 开发者被从内核的 MAINTAINERS 文件中移除 时&#xff0c;原因被描述为“合规要求”&#xff0c;但并未明确这些要求具体涉及什么内容。随后&#xff0c;Linus Torvalds 对此发表了评论&#xff0c;明确指…

计算机网络(十二) —— 高级IO

#1024程序员节 | 征文# 目录 一&#xff0c;预备 1.1 重新理解IO 1.2 五种IO模型 1.3 非阻塞IO 二&#xff0c;select 2.1 关于select 2.2 select接口参数解释 2.3 timeval结构体和fd_set类型 2.4 socket就绪条件 2.5 select基本工作流程 2.6 简单select的服务器代…

【Linux】信号量,线程池

目录 信号量 初始化​编辑 销毁 等待 发布 基于环形队列的生产消费模型 问题解答&#xff1a; 代码&#xff1a; 线程池 线程池的实现 &#xff08;1&#xff09;初始化&#xff0c;构造大致框架 &#xff08;2&#xff09;创建线程 &#xff08;3&#xff09;创建任…

Unity 世界空间(World Space)UI被模型遮挡的解决办法(Overlay摄像机)

问题&#xff1a; 想要显示掉落的物品名&#xff0c;但是这个世界空间的UI层会被模型遮挡&#xff0c;如下&#xff1a; 解决&#xff1a; 1.新建一个专门的物品名图层&#xff0c;如ItemUI 2.在主摄像机下新建一个子摄像机ItemCamera&#xff0c;渲染类型设置为Overlay&#…

Unity加载界面制作

效果 UI部分 结构 说下思路: 因为是加载界面,所以最上层是一个Panel阻止所有的UI交互,这个Panel如果有图片就加一个图片,如果没有可以把透明度调到最大,颜色设为黑色. 下面最核心的就是一个进度条了,有图片的话,将进度条的底放进来,将进度条锚点设为下中,将滑动块的尺寸设为0.…

迈威通信西安采矿展大放异彩,驱动煤矿智能转型加速跑

金秋十月&#xff0c;一场矿业技术的盛宴如约而至。10月23日至25日&#xff0c;中国(西安)国际采矿技术交流及设备展览会在西安临空会展中心圆满落下帷幕。迈威通信&#xff0c;作为矿业通信与自动化解决方案的卓越提供商&#xff0c;此次以 “布局多元融合网络&#xff0c;赋能…

SwiftUI 中 List 或 Form 子视图关联的 swipeAction 导致展开动画异常的解决

问题现象 小伙伴们都知道,在 SwiftUI 中更快捷的增强 List 或 Form 子视图(Cell)交互功能的方法是使用 swipeAction 修改器。不过,对其使用稍有不慎也会横生枝节。 如上图所示,不适当的设置 Cell 视图布局会使 swipeAction 无法生成正确的收缩和展开动画。对此我们有什么…

微信小程序文字转语音播报案例

插件申请 在小程序官方申请同声传译插件&#xff0c;地址&#xff1a; mp.weixin.qq.com 引入插件 在app.json中加入 "plugins": {"WechatSI": {"version": "0.3.6","provider": "wx069ba97219f66d99"}},封装…

南京林业大学生态学博士在1区top期刊揭示人工林发育促进土壤团聚体的形成与稳定:对土壤碳氮固存的启示

本文首发于“生态学者”微信公众号&#xff01; 文章信息 第一作者&#xff1a;石珂 通讯作者&#xff1a;阮宏华教授 通讯单位&#xff1a;南京林业大学 原文链接&#xff1a;https://doi.org/10.1016/j.catena.2024.108363 亮点 •土壤团聚体的稳定性随着林分发育而增…

接口测试(五)jmeter——get请求

一、get请求——短信验证码&#xff08;示例仅供参考&#xff09; 1. get请求&#xff1a;传参数据直接拼接在地址后面&#xff0c;jmeter不需要设置请求头content-type 注&#xff1a;短信验证码接口&#xff0c;返回结果中不会返回短信验证码&#xff0c;是存在数据库表中&a…

【C++初阶】一文讲通C++内存管理

文章目录 1. C/C内存分布2. C语言中动态内存管理方式3. C内存管理方式3. 1 new/delete操作内置类型3. 2 new和delete操作自定义类型 4. new与delete的原理4. 1 operator new与operator delete函数4. 2 内置类型4. 3 自定义类型 5. 定位new表达式(placement-new)6. malloc/free和…

校园资讯平台|校园资讯平台系统|基于java和小程序的校园资讯平台设计与实现(源码+数据库+文档)

校园资讯平台 目录 基于java和小程序的校园资讯平台设计与实现 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&#xff0c…

【mysql进阶】4-7. 通用表空间

通⽤表空间 - General Tablespace 1 通⽤表空间的作⽤和特性&#xff1f; ✅ 解答问题 通⽤表空间是使⽤ CREATE tablespace 语法创建的共享InnoDB表空间 通⽤表空间能够存储多个表的数据&#xff0c;与系统表空间类似也是共享表空间&#xff1b; 服务器运⾏时会把表空间元数…

【mysql进阶】4-6. InnoDB 磁盘文件

InnoDB 磁盘⽂件 1 InnoDB存储引擎包含哪些磁盘⽂件&#xff1f; &#x1f50d; 分析过程 ✅ 解答问题 InnoDB的磁盘⽂件主要是表空间⽂件和其他⽂件&#xff0c;表空间包括&#xff1a;系统表空间、独⽴表空间、通⽤表空间、临时表空间和撤销表空间&#xff1b;其他⽂件有重做…

springboot入门学习笔记

在我们创建了一个Springboot项目之后&#xff0c;我们会看到有很多文件夹和文件 Springboot程序中各类文件的意义 一.pom.xml 在 Spring Boot 项目中&#xff0c;pom.xml&#xff08;Project Object Model&#xff09;文件是 Maven 构建工具的核心配置文件。起到项目信息定义…