# 构建 FastVLM WebGPU 浏览器应用

下载带流式输出、取消、进度与 JSON 导出的浏览器示例，了解 WebGPU 运行条件。

Canonical URL: https://aiidelist.com/zh/blog/fastvlm-webgpu-zh

Language: zh

Published: 2026-09-24

Updated: 2026-09-24

使用本站的[完整 WebGPU 示例 ZIP](/fastvlm/downloads/fastvlm-webgpu.zip)，可以在浏览器中构建本地图片问答应用。示例包含图片输入、流式回答、模型加载进度、取消、JSON 导出和样例图片；也可以先试[在线演示](/zh/fastvlm/demo)。

## 模型与运行要求

示例固定使用 Transformers.js 4.3.0 与社区 ONNX 转换模型 `onnx-community/FastVLM-0.5B-ONNX`。它不同于 Apple 发布的原始 PyTorch 文件。浏览器需要 WebGPU、`shader-f16` 和足够的空闲 GPU 内存；能力检查通过仍不保证内存一定足够。首次下载约 1.1 GB，后续运行可能复用浏览器缓存。更多背景见[模型卡](https://huggingface.co/onnx-community/FastVLM-0.5B-ONNX)和[Transformers.js WebGPU 文档](https://huggingface.co/docs/transformers.js/guides/webgpu)。

## 启动示例

解压 ZIP，在 `fastvlm-webgpu` 目录打开终端，安装依赖并启动开发服务器。依赖版本已在示例项目中固定；构建前不要无依据地替换推理库或模型 ID。浏览器页面会在本地处理图片和问题，模型文件从 Hugging Face 下载。请根据自己的部署环境检查内容安全策略与静态资源地址。

该示例将推理放到 Web Worker，避免长时间占用主界面。每次选择图片时先验证格式和大小，再缩放到可处理的尺寸。用户取消时终止正在运行的 Worker，并清理本次状态；再次运行会重新准备模型会话。应用只记录动作类别与耗时，不把原图、文件名、问题或答案发送到本站分析事件中。

## 出错时怎么检查

| 现象 | 检查方向 |
| --- | --- |
| 浏览器没有 WebGPU 或 `shader-f16` | 换用兼容浏览器和设备，或转用[Python 工作流](/zh/blog/run-fastvlm-python-zh)。 |
| 首次加载很慢 | 检查网络、浏览器缓存、下载进度和剩余磁盘空间。 |
| 推理时内存不足 | 关闭其他占用 GPU 的页面，减小图片或改用本地 Python。 |
| 回答与图片不符 | 核对图片质量、文字大小和提示词；不要把生成结果直接当作事实。 |

JSON 导出包含问题、回答和耗时，不包含图片像素。页面中的摄像头演示是单独的 Hugging Face 嵌入，只有用户主动打开时才连接。继续阅读[模型选择指南](/zh/blog/fastvlm-models-zh)，或返回[FastVLM 中心](/zh/fastvlm)。