Install Wasm Build Environment

This page describes the steps to setup build environment for WebAssembly and WebGPU builds.

Step 1: Install EMSDK

Emscripten is an LLVM-based compiler that compiles C/C++ source code to WebAssembly.We need to install emscripten for webgpu build.

  • Please follow the installation instructionhereto install the latest emsdk.

  • Source path/to/emsdk_env.sh so emcc is reachable from PATH and the command emcc works.

Validate that emcc is accessible in shell

emcc--version

Note

We recently found that using the latestemcc version may run into issues during runtime. Use./emsdkinstall3.1.56 instead of./emsdkinstalllatest for now as a workaround.

The error may look like

Init error, LinkError: WebAssembly.instantiate(): Import #6 module="wasi_snapshot_preview1"function="proc_exit": function import requires a callable

Step 2: Set TVM_SOURCE_DIR and MLC_LLM_SOURCE_DIR

We need to set a path to a tvm source in order to build tvm runtime.Note that you do not need to build tvm unity from the source. The source here is only used to build the web runtime component.Set environment variable in your shell startup profile in to point to3rdparty/tvm (if preferred, you could alsopoint to your own TVM address if you installed TVM from source).

Besides, we also need to setMLC_LLM_SOURCE_DIR so that we can locatemlc_wasm_runtime.bc when compiling a model library wasm.

exportTVM_SOURCE_DIR=/path/to/3rdparty/tvmexportMLC_LLM_SOURCE_DIR=/path/to/mlc-llm

Step 3: Prepare Wasm Runtime

First, we need to obtain a copy of the mlc-llm source code for the setup script

gitclonehttps://github.com/mlc-ai/mlc-llm.git--recursivecdmlc-llm

Now we can prepare wasm runtime using the script in mlc-llm repo

./web/prep_emcc_deps.sh

We can then validate the outcome

>>>echo${TVM_SOURCE_DIR}/path/set/in/step2>>>ls-l${TVM_SOURCE_DIR}/web/dist/wasm/*.bctvmjs_support.bcwasm_runtime.bcwebgpu_runtime.bc