Skip to content

Commit e4180ba

Browse files
ConarnarConarnar
committed
Added EfficientSAM Wasm demo
1 parent b6ada3d commit e4180ba

File tree

7 files changed

+459
-0
lines changed

7 files changed

+459
-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: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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. Using the script `examples/portable/scripts/export.py` generate the EfficientSAM binary file for this demo.
37+
38+
```bash
39+
cd executorch # To the root of the executorch repo
40+
41+
# Export the model file for the demo
42+
python3 -m examples.portable.scripts.export --model_name="efficient_sam"
43+
```
44+
45+
## Building and Running
46+
47+
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.
48+
49+
```bash
50+
cd efficient_sam/wasm # The directory containing this README
51+
52+
# Build the demo
53+
bash build.sh
54+
55+
# Run the demo
56+
python3 -m http.server --directory build/
57+
```
58+
59+
The page will be available at http://localhost:8000/demo.html.
60+
61+
## Demo Features
62+
63+
- Load a model from a file
64+
- This demo only supports the EfficientSAM model. Passing in a model with different input/output shapes will result in an error.
65+
- Run inference on an image
66+
- Supported formats: `.png`, `.gif`, `.jpeg`, `.jpg`
67+
- Select a point on the image to run inference
68+
- May take up to 40 seconds to run inference
69+
- Show and hide the segmentation mask

‎efficient_sam/wasm/build.sh

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
-DCMAKE_BUILD_TYPE=Release \
17+
-B"${CMAKE_OUT}"
18+
19+
if [ "$(uname)" == "Darwin" ]; then
20+
CMAKE_JOBS=$(( $(sysctl -n hw.ncpu) - 1 ))
21+
else
22+
CMAKE_JOBS=$(( $(nproc) - 1 ))
23+
fi
24+
25+
cmake --build ${CMAKE_OUT} --target executorch_wasm_demo -j ${CMAKE_JOBS}

‎efficient_sam/wasm/demo.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
<p id="model_text">No model uploaded</p>
20+
<div id="canvas-container" style="position: relative;">
21+
<canvas id="canvas" width="1024" height="1024" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
22+
<canvas id="mask_canvas" width="1024" height="1024" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
23+
<canvas id="pointer_canvas" width="1024" height="1024" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
24+
</div>
25+
<script src="demo.js"></script>
26+
<script src="executorch_wasm_demo_lib.js"></script>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)