Skip to content

Commit 729a450

Browse files
ConarnarConarnar
authored
Added EfficientSAM Wasm demo (#49)
* Added EfficientSAM Wasm demo * Added XNNPACK and ETDump * Fixed typo
1 parent 4a3ff1f commit 729a450

File tree

8 files changed

+510
-0
lines changed

8 files changed

+510
-0
lines changed

‎.gitmodules

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@
1111
[submodule "mv2/wasm/executorch"]
1212
path = mv2/wasm/executorch
1313
url = https://github.com/pytorch/executorch.git
14+
15+
[submodule "efficient_sam/wasm/executorch"]
16+
path = efficient_sam/wasm/executorch
17+
url = https://github.com/pytorch/executorch.git

‎efficient_sam/wasm/CMakeLists.txt

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.
2+
#
3+
# This source code is licensed under the BSD-style license found in the LICENSE
4+
# file in the root directory of this source tree.
5+
6+
# Please this file formatted by running:
7+
# ~~~
8+
# cmake-format -i CMakeLists.txt
9+
# ~~~
10+
11+
add_subdirectory("executorch")
12+
13+
add_executable(executorch_wasm_demo_lib)
14+
target_link_libraries(executorch_wasm_demo_lib PRIVATE executorch_wasm
15+
executorch_backends)
16+
target_link_options(executorch_wasm_demo_lib PRIVATE -sALLOW_MEMORY_GROWTH
17+
-sSTACK_SIZE=262144 -sENVIRONMENT=web)
18+
19+
add_custom_command(
20+
OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/demo.js
21+
COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_SOURCE_DIR}/demo.js
22+
${CMAKE_CURRENT_BINARY_DIR}/demo.js
23+
DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/demo.js
24+
COMMENT "Copying demo.js to build output directory")
25+
26+
add_custom_command(
27+
OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/demo.html
28+
COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_SOURCE_DIR}/demo.html
29+
${CMAKE_CURRENT_BINARY_DIR}/demo.html
30+
DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/demo.html
31+
COMMENT "Copying demo.html to build output directory")
32+
33+
add_custom_target(
34+
executorch_wasm_demo
35+
DEPENDS executorch_wasm_demo_lib ${CMAKE_CURRENT_BINARY_DIR}/demo.js
36+
${CMAKE_CURRENT_BINARY_DIR}/demo.html)

‎efficient_sam/wasm/README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# ExecuTorch JavaScript Bindings Demo
2+
3+
This demo showcases the capabilities of ExecuTorch's JavaScript bindings. It is able to load a model, run inference, and classify an image natively in the browser.
4+
5+
## Installing Emscripten
6+
7+
[Emscripten](https://emscripten.org/index.html) is necessary to compile ExecuTorch for Wasm. You can install Emscripten with these commands:
8+
9+
```bash
10+
# Clone the emsdk repository
11+
git clone https://github.com/emscripten-core/emsdk.git
12+
cd emsdk
13+
14+
# Download and install version 4.0.10 of the SDK
15+
./emsdk install 4.0.10
16+
./emsdk activate 4.0.10
17+
18+
# Add the Emscripten environment variables to your shell
19+
source ./emsdk_env.sh
20+
```
21+
22+
## Setting up ExecuTorch and Generating the Model File
23+
24+
Make sure you have the system requirements listed in the [Getting Started Guide](https://docs.pytorch.org/executorch/main/getting-started.html#system-requirements) before continuing.
25+
26+
1. Install ExecuTorch from PyPI.
27+
```bash
28+
pip3 install executorch
29+
```
30+
31+
2. Update the ExecuTorch submodule.
32+
```bash
33+
git submodule update --init --recursive executorch
34+
```
35+
36+
3. Generate the EfficientSAM binary file for this demo.
37+
38+
```bash
39+
bash export.sh
40+
```
41+
It should output a file called `xnnpack_efficient_sam.pte`.
42+
43+
## Building and Running
44+
45+
Once you have Emscripten installed, ExecuTorch set up, and the model file generated, you can build and run the demo. Building may take up to 9 minutes.
46+
47+
```bash
48+
cd efficient_sam/wasm # The directory containing this README
49+
50+
# Build the demo
51+
bash build.sh
52+
53+
# Run the demo
54+
python3 -m http.server --directory build/
55+
```
56+
57+
The page will be available at http://localhost:8000/demo.html.
58+
59+
## Demo Features
60+
61+
- Load a model from a file
62+
- This demo only supports the EfficientSAM model. Passing in a model with different input/output shapes will result in an error.
63+
- Run inference on an image
64+
- Supported formats: `.png`, `.gif`, `.jpeg`, `.jpg`
65+
- Select a point on the image to run inference
66+
- May take around 6.5 seconds to run inference
67+
- Show and hide the segmentation mask

‎efficient_sam/wasm/build.sh

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#!/usr/bin/env bash
2+
# Copyright (c) Meta Platforms, Inc. and affiliates.
3+
# All rights reserved.
4+
#
5+
# This source code is licensed under the BSD-style license found in the
6+
# LICENSE file in the root directory of this source tree.
7+
8+
CMAKE_OUT=build
9+
10+
emcmake cmake . -DEXECUTORCH_BUILD_WASM=ON \
11+
-DEXECUTORCH_BUILD_EXTENSION_DATA_LOADER=ON \
12+
-DEXECUTORCH_BUILD_EXTENSION_FLAT_TENSOR=ON \
13+
-DEXECUTORCH_BUILD_EXTENSION_MODULE=ON \
14+
-DEXECUTORCH_BUILD_EXTENSION_TENSOR=ON \
15+
-DEXECUTORCH_BUILD_KERNELS_OPTIMIZED=ON \
16+
-DEXECUTORCH_BUILD_XNNPACK=ON \
17+
-DEXECUTORCH_ENABLE_EVENT_TRACER=ON \
18+
-DEXECUTORCH_BUILD_DEVTOOLS=ON \
19+
-DFLATCC_ALLOW_WERROR=OFF \
20+
-DCMAKE_BUILD_TYPE=Release \
21+
-B"${CMAKE_OUT}"
22+
23+
if [ "$(uname)" == "Darwin" ]; then
24+
CMAKE_JOBS=$(( $(sysctl -n hw.ncpu) - 1 ))
25+
else
26+
CMAKE_JOBS=$(( $(nproc) - 1 ))
27+
fi
28+
29+
cmake --build ${CMAKE_OUT} --target executorch_wasm_demo -j ${CMAKE_JOBS}

‎efficient_sam/wasm/demo.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--
2+
Copyright (c) Meta Platforms, Inc. and affiliates.
3+
All rights reserved.
4+
This source code is licensed under the BSD-style license found in the
5+
LICENSE file in the root directory of this source tree.
6+
-->
7+
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<meta charset="UTF-8" />
12+
<title>Executorch Wasm Demo</title>
13+
</head>
14+
<body>
15+
<button type="button" id="upload_model_button">Upload pte file</button>
16+
<button disabled type="button" id="upload_image_button">Upload image file</button>
17+
<button disabled type="button" id="inference_button">Run model</button>
18+
<button disabled type="button" id="mask_button">Show mask</button>
19+
<button disabled type="button" id="etdump_button">Download etdump</button>
20+
<p id="model_text">No model uploaded</p>
21+
<div id="canvas-container" style="position: relative;">
22+
<canvas id="canvas" width="1024" height="1024" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
23+
<canvas id="mask_canvas" width="1024" height="1024" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
24+
<canvas id="pointer_canvas" width="1024" height="1024" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
25+
</div>
26+
<script src="demo.js"></script>
27+
<script src="executorch_wasm_demo_lib.js"></script>
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)