Skip to content

Wasm build demo #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@
path = program-data-separation/cpp/executorch
url = https://github.com/pytorch/executorch.git
branch = release/0.7

[submodule "mv2/wasm/executorch"]
path = mv2/wasm/executorch
url = https://github.com/pytorch/executorch.git
52 changes: 52 additions & 0 deletions mv2/wasm/CMakeLists.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Copyright (c) Meta Platforms, Inc. and affiliates.
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree.

# Please this file formatted by running:
# ~~~
# cmake-format -i CMakeLists.txt
# ~~~

add_subdirectory("executorch")

add_executable(executorch_wasm_demo_lib)
target_link_libraries(executorch_wasm_demo_lib PUBLIC executorch_wasm)
target_link_options(
executorch_wasm_demo_lib PUBLIC -sALLOW_MEMORY_GROWTH
)

add_custom_command(
OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/demo.js
COMMAND
${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_SOURCE_DIR}/demo.js
${CMAKE_CURRENT_BINARY_DIR}/demo.js
DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/demo.js
COMMENT "Copying demo.js to build output directory"
)

add_custom_command(
OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/classes.js
COMMAND
${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_SOURCE_DIR}/classes.js
${CMAKE_CURRENT_BINARY_DIR}/classes.js
DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/classes.js
COMMENT "Copying classes.js to build output directory"
)

add_custom_command(
OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/demo.html
COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_SOURCE_DIR}/demo.html
${CMAKE_CURRENT_BINARY_DIR}/demo.html
DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/demo.html
COMMENT "Copying demo.html to build output directory"
)

add_custom_target(
executorch_wasm_demo
DEPENDS executorch_wasm_demo_lib
${CMAKE_CURRENT_BINARY_DIR}/classes.js
${CMAKE_CURRENT_BINARY_DIR}/demo.js
${CMAKE_CURRENT_BINARY_DIR}/demo.html
)
66 changes: 66 additions & 0 deletions mv2/wasm/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
# ExecuTorch JavaScript Bindings Demo

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.

## Installing Emscripten

[Emscripten](https://emscripten.org/index.html) is necessary to compile ExecuTorch for Wasm. You can install Emscripten with these commands:

```bash
# Clone the emsdk repository
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# Download and install version 4.0.10 of the SDK
./emsdk install 4.0.10
./emsdk activate 4.0.10

# Add the Emscripten environment variables to your shell
source ./emsdk_env.sh
```

## Setting up ExecuTorch and Generating the Model File

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.

1. Install ExecuTorch from PyPI.
```bash
pip3 install executorch
```

2. Update the ExecuTorch submodule.
```bash
git submodule update --init --recursive executorch
```

3. Using the script `examples/portable/scripts/export.py` generate the MobileNetV2 binary file for this demo.

```bash
cd executorch # To the root of the executorch repo

# Export the model file for the demo
python3 -m examples.portable.scripts.export --model_name="mv2"
```

## Building and Running

Once you have Emscripten installed, ExecuTorch set up, and the model file generated, you can build and run the demo.

```bash
cd mv2/wasm # The directory containing this README

# Build the demo
bash build.sh

# Run the demo
python3 -m http.server --directory build/
```

The page will be available at http://localhost:8000/demo.html.

## Demo Features

- Load a model from a file
- It currently only supports the MobileNetV2 model. Passing in a model with different input/output shapes will result in an error.
- Run inference on an image
- Supported formats: `.png`, `.gif`, `.jpeg`, `.jpg`
27 changes: 27 additions & 0 deletions mv2/wasm/build.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
#!/usr/bin/env bash
# Copyright (c) Meta Platforms, Inc. and affiliates.
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree.

CMAKE_OUT=build

emcmake cmake . -DEXECUTORCH_BUILD_WASM=ON \
-DEXECUTORCH_BUILD_EXTENSION_DATA_LOADER=ON \
-DEXECUTORCH_BUILD_EXTENSION_FLAT_TENSOR=ON \
-DEXECUTORCH_BUILD_DEVTOOLS=ON \
-DEXECUTORCH_BUILD_EXTENSION_MODULE=ON \
-DEXECUTORCH_BUILD_EXTENSION_TENSOR=ON \
-DEXECUTORCH_BUILD_EXTENSION_RUNNER_UTIL=ON \
-DEXECUTORCH_BUILD_WASM_DEMO=ON \
-DCMAKE_BUILD_TYPE=Release \
-B"${CMAKE_OUT}"

if [ "$(uname)" == "Darwin" ]; then
CMAKE_JOBS=$(( $(sysctl -n hw.ncpu) - 1 ))
else
CMAKE_JOBS=$(( $(nproc) - 1 ))
fi

cmake --build ${CMAKE_OUT} --target executorch_wasm_demo -j ${CMAKE_JOBS}
Loading