hyunyang-seo / wasm-sample

wasm face detection sample project for medium blog post

Face Detection on Web

This is the sample project for the medium post : Face Detection on Web Each sample directory is correspond to each blog post.

• sample1 : Build TFLite & OpenCV to WASM
• sample2 : WASM and SIMD with a Sample (Korean, English)

How to run

Common

• need emsdk version=2.0.15

> emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 2.0.15
...

• Need node
• Cannot build with ARM Mac

---

Sample1

• Simple WebAssembly running test using node

> cd sample1
> mkdir cmake-build-wasm
> cd cmake-build-wasm

# build with SIMD instructions
> emcmake cmake .. -DTFLITE_WITH_WASM_SIMD=ON -DCMAKE_BUILD_TYPE=Release
# build without SIMD instructions
> emcmake cmake .. -DTFLITE_WITH_WASM_SIMD=OFF -DCMAKE_BUILD_TYPE=Release

> make -j 4
...
...
[100%] Linking CXX executable WasmSample.js
[100%] Built target WasmSample

# with SIMD
> node --experimental-wasm-threads --experimental-wasm-simd --experimental-wasm-bulk-memory WasmSample.js


# without SIMD
> node --experimental-wasm-threads WasmSample.js

---

Sample2

• Face Detection web demo

Run

> cd sample2
> cd app
> node main.js
Server is running on http://localhost:8000
...
# Open browser and connect to http://localhost:8000/

Build and Run

> cd sample2
> mkdir cmake-build-wasm
> cd cmake-build-wasm

> emcmake cmake .. -DTFLITE_WITH_WASM_SIMD=ON -DCMAKE_BUILD_TYPE=Release
> make -j 4
...
[100%] Linking CXX executable WasmSample.js
[100%] Built target WasmSample
# Move files to app dir
> mv WasmSample.js WasmSample.wasm WasmSample.worker.js ../app/wasm/simd
> emcmake cmake .. -DTFLITE_WITH_WASM_SIMD=OFF -DCMAKE_BUILD_TYPE=Release
> make -j 4
...
[ 20%] Linking CXX executable WasmSample.js
[100%] Built target WasmSample
# Move again
> mv WasmSample.js WasmSample.wasm WasmSample.worker.js ../app/wasm/nonsimd
> cd ../app
> node main.js
Server is running on http://localhost:8000
...

# Open browser and connect to http://localhost:8000/

---

Demo