网页演示

相关源文件

• demo/README.md
• demo/src/App.tsx
• demo/src/components/Stage.tsx
• demo/src/components/Tool.tsx

Web Demo 是一款前端 React 应用，它展示了完全在浏览器中运行的 Segment Anything Model (SAM) 的能力。本页面介绍了 Web Demo 的架构、工作原理以及如何运行和自定义它。有关 Web Demo 使用的 ONNX 导出的信息，请参阅 ONNX 导出。

概述

Web Demo 通过使用 WebAssembly 在浏览器中直接运行模型，展示了 SAM 的实时分割能力。该 Demo 允许用户将鼠标悬停在图像上，模型会根据鼠标位置实时预测对象掩码。

来源: demo/README.md1-23 demo/src/App.tsx21-23

架构

Web Demo 是一个 React 应用，它加载预先计算好的图像嵌入，并在浏览器中直接运行 SAM ONNX 模型。它使用了 Web Worker 的多线程和 SIMD128 优化来提高性能。

来源: demo/README.md96-123 demo/src/App.tsx25-130 demo/src/components/Stage.tsx1-49 demo/src/components/Tool.tsx1-73

关键组件

App 组件

The App 组件是主入口点，负责

1. 初始化 ONNX 模型
2. 加载预先计算好的图像嵌入
3. 在用户与图像交互时运行模型
4. 处理模型输出以生成可视化的掩码

来源: demo/src/App.tsx25-130 demo/README.md98-103

Stage 组件

The Stage 组件管理用户交互

1. 捕捉鼠标在图像上的移动
2. 将光标坐标转换为正确的比例
3. 为模型生成点击提示
4. 更新应用程序状态以触发模型推理

来源: demo/src/components/Stage.tsx13-47 demo/README.md104-107

Tool 组件

The Tool 组件处理可视化

1. 渲染输入图像
2. 将预测的掩码叠加在图像上
3. 管理图像缩放以适应视口

来源: demo/src/components/Tool.tsx12-73 demo/README.md108-111

数据流

来源: demo/src/App.tsx38-96 demo/src/components/Stage.tsx19-37 demo/src/components/Tool.tsx12-70

运行 Web Demo

先决条件

1. 预先计算好的图像嵌入（.npy 文件）
2. 量化后的 ONNX 模型
3. Node.js 和 Yarn

安装与设置

1. 安装 Yarn

   npm install --g yarn
   

2. 构建并运行应用

   yarn && yarn start
   

3. 导航至 http://:8081/

来源: demo/README.md7-23

自定义 Web Demo

可以通过替换图像、嵌入和模型文件来定制 Web Demo。该过程包括

1. 导出新的图像嵌入
2. 更新应用程序中的文件路径

导出新的图像嵌入

使用 SAM Python API，您可以为新图像生成嵌入

1. 初始化预测器

2. 设置您的图像并导出嵌入

来源: demo/README.md25-46

更新文件路径

在 App.tsx 中更新以下常量

来源: demo/README.md73-81 demo/src/App.tsx21-23

技术要求

ONNX 多线程与 SharedArrayBuffer

Web Demo 为了性能使用了多线程，这需要特定的 HTTP 头部才能进行跨域隔离。

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: credentialless

这些头部允许使用 SharedArrayBuffer，这是多线程 WebAssembly 执行所必需的。

来源: demo/README.md83-94

实现细节

图像缩放

Demo 将输入图像缩放到最长边为 1024 像素，这是 SAM 模型的预期输入尺寸。

来源: demo/src/App.tsx64-78 demo/README.md122-123

掩码生成过程

1. 用户将光标移到图像上
2. 点击位置被转换为模型输入坐标
3. 模型输入使用点击坐标和图像嵌入进行格式化
4. ONNX 模型运行推理以生成掩码
5. 输出掩码数组被转换为图像以供显示

来源: demo/src/components/Stage.tsx19-37 demo/src/App.tsx97-125

文件结构

文件	目的
App.tsx	主应用组件，负责模型初始化和推理
Stage.tsx	管理用户交互和点击生成
Tool.tsx	负责图像和掩码的渲染
helpers/maskUtils.tsx	将模型输出转换为可显示的图像
helpers/onnxModelAPI.tsx	为 ONNX 模型格式化输入
helpers/scaleHelper.tsx	处理 SAM 的图像缩放

来源: demo/README.md96-123

限制和注意事项

1. Web Demo 仅适用于预先计算好的图像嵌入，这些嵌入必须提前生成。
2. 它需要适当的 HTTP 头部来进行跨域隔离。
3. 性能取决于客户端设备的性能，因为模型完全在浏览器中运行。
4. Demo 使用了量化的 ONNX 模型，以在浏览器环境中获得更好的性能。

来源： demo/README.md3 demo/README.md83-94