RustとWebAssemblyを使って高速な画像処理をWebアプリで実行しよう

Transcript

1. Rust + WebAssembly を使って高速な画像処理を Webアプリで実行しよう！ Rust ランチLT大会 - 企業でのRust活用事例 株式会社アダコテック プロダクト開発部 井上(SHINue_rebonire)
2. Confidential & Proprietary | C#はいいぞ！ 2 自己紹介 井上真嘉 (SHINue_rebonire) / @rebonire_itame 株式会社アダコテック プロダクト開発部 エンジニア 好き：ホラー小説・映画、タコス、ちいかわ 2024 2020 2013 光学機器メーカ アダコテック ハード/ソフトウェアエンジニア ソフトウェアエンジニア 電気設計, ときどき光学設計 Rustもいいぞ！！ Windowsデスクトップアプリ開発 画像処理 データ分析, 機械学習 Webアプリ開発 (FE, BE)
3. Confidential & Proprietary | 3 本日の内容 • Rustを利用したプロダクトの紹介 • 技術選定 • 簡単に実装の流れ • さいごに C#はいいぞ！ 2024 2020 2013 電気設計, ときどき光学設計 Rustもいいぞ！！ Windowsデスクトップアプリ開発 画像処理 データ分析, 機械学習 Webアプリ開発 (FE, BE) このときのおはなし
4. Confidential & Proprietary | 4 アダコテックについて
5. Confidential & Proprietary | 5 画像検査AIモデル作成ツール AdaInspector® Cloud 画像検査モデル作成ツール AdaInspector® Cloudでは、 HLAC特徴抽出法を用いた独自の画像検査AIモデルをクラウド上で作成（とテストが）できる。
6. Confidential & Proprietary | 6 弊社プロダクトの利用例 作成したモデルは弊社が提供するSDKに対応したソフトウェアにて推論実行可能。 AdaInspector® Cloud 検査用Windowsデスクトップアプリ 検査モデル SDK (.dll) （工場の検査設備に付属したPC） ダウンロード アップロード（例えばパラメタチューニングのために） Pass Fail 執務室 工場 対象製品 検査装置 学習 & テスト
7. Confidential & Proprietary | 7 検査精度の改善のために 対象製品（オブジェクト）の位置が各画像で揃っていると、より高精度な検査が可能となる。 しかし、画像を取得する機器・機構の都合上、必ず同じ場所に製品が来ないこともある。 そのときは、「画像処理でオブジェクト位置を揃えてあげる（位置補正）」ことをする。 ･･･ ･･･ ･･･ ･･･ こうなっているよりも このほうがいいな
8. Confidential & Proprietary | 工場 執務室 8 Windowsデスクトップアプリ で 位置補正 位置補正が必要なユーザ向けに位置補正用Windowsデスクトップアプリを提供していた。 AdaInspector® Cloud 検査用Windowsデスクトップアプリ 検査モデル SDK (.dll) （工場の検査設備に付属したPC） ダウンロード Pass Fail 対象製品 位置補正用Windows デスクトップアプリ アップロード （位置補正処理を直接実装しているアプリ） 検査装置 学習 & テスト
9. Confidential & Proprietary | 9 Windowsデスクトップアプリ で 位置補正 の課題点 • モデルをチューニングするユーザは、WebアプリとWindowsアプリの両方を利用することになり、 認知コストが高くなってしまう。 • 執務室PCにWindowsアプリをインストールできないユーザがいる。 （ホワイトリスト設定されている） • 一度インストールすると、新しいバージョンがリリースされても古いバージョンを使い続けてしまう ことが多く、最新機能を提供することが困難。 • 使用状況のログが収集できず、UI/UXや性能改善のための洞察ができない。 （Sentryを活用すればできるか…? Windowsデスクトップアプリでやったことない orz）
10. Confidential & Proprietary | 10 Webアプリ化すればいいじゃない …ということで つよつよ テックリード つよつよ PdM やろう！！ やったぜ！
11. Confidential & Proprietary | 11 Webアプリの技術選定（ざっくり） • フロントエンド • React + TypeScript • 社内知見が多い • 画像処理エンジン • WebAssembly (WASM) • ブラウザ上でC++, Rustなどからコンパイルされたバイナリコードを実行できる • クライアントサイドでサクサク画像処理を行う（なるべく応答速度を早くする） • Rust • 既存Windowsアプリの画像処理はC++で実装されており、それを活用でも良かった しかし、WASMと相性が良い（事例が多い）といわれるRustを採用することにした • 社内の「新しいことガンガン挑戦しようぜ！」の風土の後押しもあった • imageクレートで画像処理をゴリゴリ実装 • cargo-llvm-covでテストカバレッジ計測 位置補正機能は計算量が多めなので 別スレッド(Web Worker)で Wasmファイルを実行するスタイルをとった
12. Confidential & Proprietary | 12 Rustの良いところ さまざまなところでRustの良さは語られている 公式（https://www.rust-lang.org）に書かれていることが全てかもしれない 特にメモリ安全に関しては C++おじさんだったぼくも にっこり 正直コレが良かった！ cargoの便利さ エラーメッセージの優しさ
13. Confidential & Proprietary | 13 構成 Webアプリ 画像処理エンジン Workspace - web - core_lib - win Windowsアプリ用DLL Webフロントエンドとのデータやりとり 画像処理を実装 Windows用dllとのデータやりとり build build WA 別スレッドで .wasmを利用 RustのDLLの関数を C#でラップする Image Positioning Tool image_positioning.dll Windowsアプリ開発時にこのライブラリを組込み 公開している関数を叩くことでWebアプリ同様の位置補正が可能
14. Confidential & Proprietary | 工場 執務室 14 こうなった AdaInspector® Cloud 検査用Windowsデスクトップアプリ 検査モデル SDK (.dll) ダウンロード Pass Fail 対象製品 Image Positioning Tool 検査装置 学習 & テスト image_positioning.dll （工場の検査設備に付属したPC）
15. Confidential & Proprietary | 15 ざっくりとした実装の流れ この発表でみなさんも Rust + WebAssembly にチャレンジできれば良いなということで 簡単に実装の流れを共有しようと思います！ Webアプリ 画像処理エンジン Workspace - web - core_lib Webフロントエンドとのデータやりとり 画像処理を実装 build WA .wasmを利用
16. Confidential & Proprietary | 16 事前準備 (1) Wasmファイル作成環境 Wasmファイル(.wasm)を作成するため、wasm32-unknown-unknownがターゲットアーキテクチャに 入っていることを確認。 入っていない場合は以下のコマンドで追加。 Rustが開発環境に入っている前提で進めますm(__)m 以下のコマンドでwasm-packをインストールする。 < RustコードをWasmファイルにビルドするために用います。
17. Confidential & Proprietary | 17 事前準備 (2) プロジェクト作成 2つのライブラリプロジェクトの依存関係の一括管理や、 ビルド効率化などが可能となる sample_app └rust ├web │ ├src │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml └Cargo.toml
18. Confidential & Proprietary | 18 事前準備 (3) 言語間共通のスキーマ定義 ※任意 シリアライズフォーマットとしてFlatBuffersをインストールする。 image_processing.fbs .fbsファイルによってデータのスキーマ（どのデータがどの順番に並ぶか）を定義し、 flatcで各言語（C++, Rust, TypeScriptなど）のインタフェース用コードを書き出すことができる。 sample_app ├flatbuffers │└image_processing.fbs └rust ├web │ ├src │ │ ├image_processing_generated.rs │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml └Cargo.toml --tsとすればTypeScript用の インタフェース用コードが書き出される
19. Confidential & Proprietary | sample_app ├flatbuffers └rust ├web │ ├src │ │ ├image_processing_generated.rs │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml └Cargo.toml 19 画像処理を実装 core_lib/src/lib.rsに実装する。imageクレート（cargo add image）で画像データを扱うことが可能。 計算量が多い画像処理等のロジックを実装するのが良いです！ 超簡単な処理をRust+WebAssemblyで実装するメリットは 無いかも。（遊んでみるだけなら別ですが）
20. Confidential & Proprietary | sample_app ├flatbuffers └rust ├web │ ├src │ │ ├image_processing_generated.rs │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml └Cargo.toml 20 Webフロントエンドとデータをやりとりする実装 (1) web/Cargo.tomlを編集する。 ブラウザで実行可能なWasmファイルを 生成できる core_libに実装した関数を呼ぶため 依存関係に追加する flatbuffers: image_processing型の構造体のデシリアライズ/シリアライズ wasm-bindgen: WasmとJavaScript(TypeScript)間でデータの受け渡しをする cargo add flatbuffers wasm-bindgenで追加できる。
21. Confidential & Proprietary | sample_app ├flatbuffers └rust ├web │ ├src │ │ ├image_processing_generated.rs │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml └Cargo.toml 21 Webフロントエンドとデータをやりとりする実装 (1) web/src/lib.rsに実装する。 flatcで生成されたインタフェース用コード をインポート Webフロントエンド側から アクセスできる ① ② ③ ④ ①image_processing構造体を読み取り (画像処理を実行) ②画像処理結果のバイナリデータを生成 ③image_processing構造体に結果を格納 ④Webフロントエンド側に返すバイナリデータを生成
22. Confidential & Proprietary | 22 Wasmファイルの生成 wasm-packをつかってWasmファイルを生成する。 sample_app ├flatbuffers └rust ├web │ ├src │ │ ├image_processing_generated.rs │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml ├pkg └Cargo.toml ブラウザ（Webアプリ）で使用可能なWasmファイルを生成する ※ライブラリプロジェクトwebとは無関係です（ややこしくしてしまったm(__)m） Webアプリ向けのWasmファイルと JavaScriptのバインディングコードが出力される
23. Confidential & Proprietary | 23 WebアプリからWasmファイルを実行 もう少し詳細な実装は以下のブログに 記載しています！
24. Confidential & Proprietary | 24 実行！ TypeScriptに画像処理実装 Rust+WebAssemblyで実装 282msec 7,076msec 処理時間 画像処理がサクッと実行された！
25. Confidential & Proprietary | 25 注意点 (2024/10/30時点) • ビルドターゲットwasm32-unknown-unknownですが、アクセスできるメモリは 最大2GiBで制限がかかっている。 • 本プロダクトだと位置補正時（のための特徴探索）のパラメータ設定と、 入力する画像解像度次第ではドカッと制限に到達してしまうケースがあった • 制限にひっかかりそうなとき（フロントエンドで画像を入力したときに評価）は、 画像を分割してWASMにデータを渡すようにした。 • Rustバージョン1.82でwasm-bindgenを利用しているとwasm-packでビルドできない？ • Rust 1.81で利用したほうが 良いかも。
26. Confidential & Proprietary | 26 さいごに • テクニカルな構成をとっているが、無事Webアプリ化することができてよかった。 • このプロダクトが、弊社にとって初めて「Rustを利用したプロダクト」だった。 • 最近はRust入門書がどんどん増えてきているので学習しやすくなってきてる！ • もちろんアウトプットも大切！（なんかテキトーなアプリ作ってみるのもヨシッ！） <= Rustで初めて実装したもの。 （既存コードをRustに焼き直し） 年末にSlackのrandomチャンネルで 使われているemojiを集計しました。 我々はよく、褒めたり、感謝したり、 草を生やしたりします。
27. Rustはいいぞ！