Open10

WASMの技術検証

PINTOPINTO

まずは仕上がっている手順をトレースしてどのような段取りとリソースが必要かを確認する。

git clone https://github.com/k2-fsa/sherpa-onnx && cd sherpa-onnx
git checkout v1.10.21

# WASM化対象のリソースのダウンロード
cd wasm/asr/assets
wget -q https://github.com/k2-fsa/sherpa-onnx/releases/download/asr-models/sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20.tar.bz2
tar xvf sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20.tar.bz2

#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/README.md
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/encoder-epoch-99-avg-1.onnx
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/decoder-epoch-99-avg-1.onnx
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/joiner-epoch-99-avg-1.onnx
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/joiner-epoch-99-avg-1.int8.onnx
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/decoder-epoch-99-avg-1.int8.onnx
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/tokens.txt
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/test_wavs/
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/test_wavs/3.wav
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/test_wavs/0.wav
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/test_wavs/1.wav
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/test_wavs/2.wav
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/test_wavs/8k.wav
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/bpe.model
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/encoder-epoch-99-avg-1.int8.onnx
#sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/bpe.vocab

rm sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20.tar.bz2
mv sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/encoder-epoch-99-avg-1.int8.onnx encoder.onnx
mv sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/decoder-epoch-99-avg-1.onnx decoder.onnx
mv sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/joiner-epoch-99-avg-1.int8.onnx joiner.onnx
mv sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/tokens.txt ./
rm -rf sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20/

# Emscripten SDK のインストール
cd ../../../..
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
git checkout 3.1.64
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

# WASMのビルド
cd ../sherpa-onnx
./build-wasm-simd-asr.sh

# ビルド結果
#-rw-r--r-- 1 xxxx xxxx 9.0K  8月 15 10:58 app-asr.js
#-rw-r--r-- 1 xxxx xxxx  986  8月 15 10:58 index.html
#-rw-r--r-- 1 xxxx xxxx  28K  8月 15 10:58 sherpa-onnx-asr.js
#-rw-r--r-- 1 xxxx xxxx 190M  8月 15 14:12 sherpa-onnx-wasm-main-asr.data
#-rw-r--r-- 1 xxxx xxxx  85K  8月 15 14:14 sherpa-onnx-wasm-main-asr.js
#-rw-r--r-- 1 xxxx xxxx  11M  8月 15 14:14 sherpa-onnx-wasm-main-asr.wasm
PINTOPINTO

シェルスクリプトの中でやっていること。

build-wasm-simd-asr.sh
build-wasm-simd-asr.sh
#!/usr/bin/env bash
# Copyright (c)  2024  Xiaomi Corporation
#
# This script is to build sherpa-onnx for WebAssembly (ASR)

set -ex

if [ x"$EMSCRIPTEN" == x"" ]; then
  if ! command -v emcc &> /dev/null; then
    echo "Please install emscripten first"
    echo ""
    echo "You can use the following commands to install it:"
    echo ""
    echo "git clone https://github.com/emscripten-core/emsdk.git"
    echo "cd emsdk"
    echo "git pull"
    echo "./emsdk install latest"
    echo "./emsdk activate latest"
    echo "source ./emsdk_env.sh"
    exit 1
  else
    EMSCRIPTEN=$(dirname $(realpath $(which emcc)))
  fi
fi

export EMSCRIPTEN=$EMSCRIPTEN
echo "EMSCRIPTEN: $EMSCRIPTEN"
if [ ! -f $EMSCRIPTEN/cmake/Modules/Platform/Emscripten.cmake ]; then
  echo "Cannot find $EMSCRIPTEN/cmake/Modules/Platform/Emscripten.cmake"
  echo "Please make sure you have installed emsdk correctly"
  exit 1
fi

mkdir -p build-wasm-simd-asr
pushd build-wasm-simd-asr

export SHERPA_ONNX_IS_USING_BUILD_WASM_SH=ON

cmake \
  -DCMAKE_INSTALL_PREFIX=./install \
  -DCMAKE_BUILD_TYPE=Release \
  -DCMAKE_TOOLCHAIN_FILE=$EMSCRIPTEN/cmake/Modules/Platform/Emscripten.cmake \
  \
  -DSHERPA_ONNX_ENABLE_PYTHON=OFF \
  -DSHERPA_ONNX_ENABLE_TESTS=OFF \
  -DSHERPA_ONNX_ENABLE_CHECK=OFF \
  -DBUILD_SHARED_LIBS=OFF \
  -DSHERPA_ONNX_ENABLE_PORTAUDIO=OFF \
  -DSHERPA_ONNX_ENABLE_JNI=OFF \
  -DSHERPA_ONNX_ENABLE_C_API=ON \
  -DSHERPA_ONNX_ENABLE_WEBSOCKET=OFF \
  -DSHERPA_ONNX_ENABLE_GPU=OFF \
  -DSHERPA_ONNX_ENABLE_WASM=ON \
  -DSHERPA_ONNX_ENABLE_WASM_ASR=ON \
  -DSHERPA_ONNX_ENABLE_BINARY=OFF \
  -DSHERPA_ONNX_LINK_LIBSTDCPP_STATICALLY=OFF \
  ..
make -j2
make install

ls -lh install/bin/wasm/asr
PINTOPINTO
  • WASM でビルド済みのプログラムを起動する
cd build-wasm-simd-asr/install/bin/wasm/asr
python3 -m http.server 6006
  • ブラウザから http://localhost:6006/ にアクセスする
  • 下図のように表示される
  • ブラウザ上部にポップアップしてくるマイクへのアクセス許可ダイアログでアクセスを許可する
PINTOPINTO
Chrome の WebGPU 機能を有効にする方法
  • Chrome で chrome://flags/ にアクセスする
  • 下図のとおり、検索ボックスに webgpu を入力する
  • Unsafe WebGPU SupportWebGPU Developer FeaturesEnabled に変更する
  • ブラウザ右下の Relaunch ボタンをクリックする
PINTOPINTO
git clone https://github.com/microsoft/onnxruntime-inference-examples.git \
&& cd onnxruntime-inference-examples
git checkout 0de2e66e03981714e5308c457b72d785e98d0fe2

cd js/ort-whisper
npm install
npm run build

PINTOPINTO

https://github.com/microsoft/Olive/issues/1279

#pip install olive-ai[gpu]==0.6.2

git clone https://github.com/microsoft/Olive.git && cd Olive
git checkout e64ba0a27feb019323060ba10bd8fd15b95f1aef
python -m pip install .

cd examples/whisper

#neural-compressor
#onnxruntime_extensions>=0.9.0
#tabulate
#torch>=1.13.1
#exported model is incompatible after transformers 4.43.0
#produces empty text
#transformers>=4.23.1,<4.43.0
python -m pip install -r requirements.txt

python prepare_whisper_configs.py \
--model_name openai/whisper-tiny.en \
--no_audio_decoder

pip uninstall -y onnxruntime-gpu

python -m olive run \
--config whisper_cpu_int8.json \
--setup

python -m olive run \
--config whisper_cpu_int8.json

  File "/home/xxxx/git/onnxruntime-inference-examples/js/ort-whisper/Olive/examples/whisper/code/user_script.py", line 16, in get_encoder_decoder_init
    model = WhisperForConditionalGeneration.from_pretrained(model_path, attn_implementation="eager")
  File "/home/xxxx/.local/lib/python3.10/site-packages/transformers/modeling_utils.py", line 2675, in from_pretrained
    model = cls(config, *model_args, **model_kwargs)
TypeError: WhisperForConditionalGeneration.__init__() got an unexpected keyword argument 'attn_implementation'