基于WebAssembly实现浏览器端目标检测AI推理

基于WebAssembly实现浏览器端目标检测AI推理

体验地址

det.vansin.top/

github.com/vansin/ncnn…

复现步骤

1. 安装emscripten工具链

此工具链用于把C++编译成WebAssembly

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install 2.0.8
./emsdk activate 2.0.8

source emsdk/emsdk_env.sh
复制代码

注意以下所有的操作都需要先 source emsdk/emsdk_env.sh

2. 编译测试ncnn

git clone https://github.com/Tencent/ncnn.git
mkdir build
cd build
复制代码

如果是针对iOS中Safari等浏览器编译的，没有SIMD SSE2，使用以下代码编译

cmake -DCMAKE_TOOLCHAIN_FILE=../emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DNCNN_OPENMP=OFF -DNCNN_SIMPLEOMP=OFF -DNCNN_RUNTIME_CPU=OFF -DNCNN_SSE2=OFF -DNCNN_AVX2=OFF -DNCNN_BUILD_TESTS=ON ..
复制代码

make -j
复制代码

测试

TESTS_EXECUTABLE_LOADER=node ctest --output-on-failure -j 2
复制代码

如果测试通过

make install
复制代码

3. 编译ncnn-webassembly-nanodet

git clone https://github.com/vansin/ncnn-webassembly-nanodet
cd ncnn-webassembly-nanodet
复制代码

把编译好的ncnn的install复制到ncnn-webassembly-nanodet目录下

mkdir build
cd build

cmake -DCMAKE_TOOLCHAIN_FILE=$EMSDK/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DWASM_FEATURE=basic ..

make -j
复制代码

把index.html和wasmFeatureDetect.js复制到build中

cp ../index.html index.html
cp ../wasmFeatureDetect.js wasmFeatureDetect.js
复制代码

全局安装http-server，并启动

npm install -g http-server
http-server .
复制代码

参考

github.com/nihui/ncnn-…

waittim.github.io/2020/11/15/…