首页 > web前端 > js教程 > 正文

WebGPU 太神奇了:我构建了两个快如闪电的 AI 图像处理工具!

Linda Hamilton
发布: 2024-11-06 03:00:02
原创
684 人浏览过

作为一名对新兴技术(尤其是 AI)充满热情的 Web 工程师,我一直在探索 Microsoft 的 onnxruntime-web 库。使用这个强大的工具,我开发了BatchTool - 一个在线人工智能驱动的图像处理平台。

ONNX Runtime Web 是一个 Javascript 库,用于在浏览器和 Node.js 上运行 ONNX 模型。 ONNX Runtime Web 采用了 WebAssembly 和 WebGL 技术,为 CPU 和 GPU 提供优化的 ONNX 模型推理运行时。

目前,BatchTool 提供两个主要功能:

  1. 批量背景去除
  2. 批量对象/水印去除

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

批处理工具的主要特点

  • 隐私第一:使用本地人工智能模型 - 无需服务器上传
  • 人工智能驱动:利用人工智能来简化复杂的任务
  • 高性能:WebGPU 加速可在几毫秒内处理每个图像
  • 高效的批处理:只需单击一下即可处理多个文件
  • 用户友好:简单、直观的界面,零学习曲线
  • 跨平台:在浏览器中工作 - 无需安装

批量背景去除

型号下载

删除背景在您的浏览器上运行,不需要上传到服务器。 首次使用时只需下载对应的模型即可。之后模型文件将缓存在浏览器缓存中,下次使用时可以直接使用。

如下屏幕显示:WebGPU ✅ 表示当前设备支持WebGPU加速。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

选择图像

选择要处理的图片后,Batch Tool会自动检测当前运行环境,如果当前环境支持WebGPU加速,则启用WebGPU加速模式,否则自动切换到CPU模式。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

删除图像背景后,单击“比较图像”图标即可查看删除背景的效果。

图片来自:https://pixabay.com/

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

接下来,您可以点击批量下载按钮,批量下载所有已经处理过的图片。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

批量对象/水印去除

型号下载

与去除背景一样,对象去除是在浏览器上运行的,不需要上传到服务器。首次使用时只需下载对应的型号即可。之后模型文件会缓存在浏览器缓存中,下次使用时可以直接使用。

场景1

在此场景中,您可以一次选择多张图像,然后对每张图像逐一执行对象擦除操作。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

擦除完成后,您可以立即下载修复后的单张图片,也可以等到所有图片都调整完毕后再一次性下载。

场景2

该场景适合批量擦除多张相同尺寸图片同一区域的水印。步骤也很简单,就四个小步骤。

1.选择多张需要处理的图片;
2.启用批量擦除同区域水印模式;

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

3.选择第一张图片,用画笔绘制水印区域;
4.单击功能区上的修复按钮(橡皮擦图标)。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

之后程序会自动执行,当一张图片处理完成后,会在右侧缩略图上显示完成的logo,如下图:

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

场景2非常适合批量去除固定区域水印,大大提高工作效率。如果你的电脑支持WebGPU加速,处理速度会非常快,平均单张图片只需几百毫秒。

我邀请您尝试BatchTool的图像处理功能!如果您在使用该工具时遇到任何问题,请随时发表评论。

以上是WebGPU 太神奇了:我构建了两个快如闪电的 AI 图像处理工具!的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!