Wasm build demo (#45)

* Copied demo files

* Added more instructions

* Moved error checking to separate function

* Clarified the readme

* Simplified installation instructions

* Removed unnecessary options

---------

Co-authored-by: Conan Jeffrey Truong <[email protected]>

Author: Conarnar

.gitmodules

@@ -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

mv2/wasm/CMakeLists.txt

@@ -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
+)

mv2/wasm/README.md

@@ -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`

mv2/wasm/build.sh

@@ -0,0 +1,24 @@
+#!/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_EXTENSION_MODULE=ON \
+    -DEXECUTORCH_BUILD_EXTENSION_TENSOR=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}