前言你是否想过不需要安装任何软件直接在浏览器里就能运行YOLOv8目标检测就像打开网页刷视频一样简单。这不是天方夜谭借助ONNX Runtime Web技术我们真的可以在浏览器中运行复杂的深度学习模型进行实时推理。今天要介绍的QuickInfer-web就是这样一个开源项目。为什么需要在浏览器运行AI模型传统的AI推理通常需要安装Python环境和各种依赖配置CUDA驱动和GPU支持部署模型服务到服务器这个过程对于非技术人员来说门槛较高。而浏览器端推理的优势在于对比项传统部署浏览器推理安装配置需要安装Python、PyTorch等无需安装打开即用环境配置依赖版本冲突头疼浏览器自带环境跨平台需要编译支持Windows/Mac/Linux/手机通用分享协作部署服务或打包直接发链接技术架构QuickInfer-web 基于以下技术栈构建前端原生 JavaScript Vite 构建 推理引擎ONNX Runtime Web 1.24.3 AI模型YOLOv8 (ONNX格式) 后端支持WASM (CPU) / WebGPU / WebGL三种推理后端对比后端性能兼容性推荐场景WASM中等所有现代浏览器通用推荐默认选项WebGPU最佳Chrome/Edge (桌面)高性能需求WebGL中高所有主流浏览器兼容性平衡支持的模型规模项目内置了YOLOv8全系列模型满足不同设备和场景需求模型参数量模型大小推荐场景YOLOv8n3.2M~12MB移动端/低配设备YOLOv8s11.2M~43MB日常使用YOLOv8m25.9M~99MB精度要求较高YOLOv8l43.7M~167MB桌面端使用YOLOv8x68.2M~260MB高精度场景核心功能实测1. 图片目标检测上传任意图片选择模型和后端点击运行即可得到检测结果。预处理、推理、后处理各阶段耗时一目了然。操作流程1. 选择模型大小默认YOLOv8n2. 选择推理后端WASM/WebGPU/WebGL3. 上传图片或拖拽图片到上传区域4. 点击Run Inference运行检测2. 手机摄像头实时推理这是我认为最有意思的功能——用手机浏览器打开网页直接调用摄像头进行实时目标检测。实测在手机Chrome上效果流畅15FPS的推理速度配合实时预览基本可以做到所见即检测。支持的摄像头能力Android Chrome (推荐)iOS Safari (需要iOS 14)桌面端摄像头通用3. 性能指标可视化每次推理后系统会展示详细的性能数据预处理时间图片 resize、归一化、Tensor转换推理时间模型前向传播耗时后处理时间NMS、框绘制还会统计多次运行的平均值、最小值、最大值方便你评估性能稳定性。部署自己的模型项目支持接入自定义ONNX模型只需修改环境变量# .env 或 .env.githubVITE_MODELSCOPE_REPOyour-username/your-model-repoVITE_MODELS[{name:your-model.onnx,size:~50MB}]模型文件需要上传到 ModelScope 并确保支持 CORS 跨域访问。本地开发如果你是开发者可以克隆项目本地运行gitclone https://github.com/ckfanzhe/quickinfer.gitcdquickinfernpminstallnpmrun dev然后访问https://localhost:5173即可。部署到GitHub Pages也很简单npmrun build:github生成的文件在dist目录直接推送即可自动部署。性能表现参考以下是不同设备、不同后端的YOLOv8n推理耗时对比仅供参考设备浏览器后端推理耗时iPhone 14SafariWebGL~45ms小米12ChromeWebGL~38msMacBook M1SafariWebGPU~15ms桌面PC (RTX3060)ChromeWebGPU~8ms注实际性能受图片尺寸、模型大小、系统负载等因素影响适用场景快速验证模型效果- 不需要搭环境直接测试ONNX模型边缘设备部署演示- 给客户展示AI能力无需安装任何软件移动端原型开发- 测试模型在手机浏览器的运行效果前端性能对比- 量化不同后端在不同场景的推理速度项目总结QuickInfer-web 作为一个开源项目提供了✅ 纯前端实现无需后端服务✅ 支持多种推理后端WASM/WebGPU/WebGL✅ 支持手机浏览器实时推理✅ 完整的性能指标可视化✅ 支持自定义模型接入✅ 开源免费可自由扩展GitHub地址ckfanzhe/quickinfer在线体验QuickInfer-web如果你对浏览器端AI推理感兴趣这个项目值得研究。技术实现不复杂但思路很有启发性——把计算放到边缘浏览器就是最好的边缘计算节点。有任何问题欢迎评论区交流