Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

SHINue-rebonire

November 05, 2024
Tweet

Other Decks in Technology

Transcript

  1. Confidential & Proprietary | C#はいいぞ! 2 自己紹介 井上真嘉 (SHINue_rebonire) /

    @rebonire_itame 株式会社アダコテック プロダクト開発部 エンジニア 好き:ホラー小説・映画、タコス、ちいかわ 2024 2020 2013 光学機器メーカ アダコテック ハード/ソフトウェアエンジニア ソフトウェアエンジニア 電気設計, ときどき光学設計 Rustもいいぞ!! Windowsデスクトップアプリ開発 画像処理 データ分析, 機械学習 Webアプリ開発 (FE, BE)
  2. Confidential & Proprietary | 3 本日の内容 • Rustを利用したプロダクトの紹介 • 技術選定

    • 簡単に実装の流れ • さいごに C#はいいぞ! 2024 2020 2013 電気設計, ときどき光学設計 Rustもいいぞ!! Windowsデスクトップアプリ開発 画像処理 データ分析, 機械学習 Webアプリ開発 (FE, BE) このときのおはなし
  3. Confidential & Proprietary | 5 画像検査AIモデル作成ツール AdaInspector® Cloud 画像検査モデル作成ツール AdaInspector®

    Cloudでは、 HLAC特徴抽出法を用いた独自の画像検査AIモデルをクラウド上で作成(とテストが)できる。
  4. Confidential & Proprietary | 6 弊社プロダクトの利用例 作成したモデルは弊社が提供するSDKに対応したソフトウェアにて推論実行可能。 AdaInspector® Cloud 検査用Windowsデスクトップアプリ

    検査モデル SDK (.dll) (工場の検査設備に付属したPC) ダウンロード アップロード(例えばパラメタチューニングのために) Pass Fail 執務室 工場 対象製品 検査装置 学習 & テスト
  5. Confidential & Proprietary | 工場 執務室 8 Windowsデスクトップアプリ で 位置補正

    位置補正が必要なユーザ向けに位置補正用Windowsデスクトップアプリを提供していた。 AdaInspector® Cloud 検査用Windowsデスクトップアプリ 検査モデル SDK (.dll) (工場の検査設備に付属したPC) ダウンロード Pass Fail 対象製品 位置補正用Windows デスクトップアプリ アップロード (位置補正処理を直接実装しているアプリ) 検査装置 学習 & テスト
  6. Confidential & Proprietary | 9 Windowsデスクトップアプリ で 位置補正 の課題点 •

    モデルをチューニングするユーザは、WebアプリとWindowsアプリの両方を利用することになり、 認知コストが高くなってしまう。 • 執務室PCにWindowsアプリをインストールできないユーザがいる。 (ホワイトリスト設定されている) • 一度インストールすると、新しいバージョンがリリースされても古いバージョンを使い続けてしまう ことが多く、最新機能を提供することが困難。 • 使用状況のログが収集できず、UI/UXや性能改善のための洞察ができない。 (Sentryを活用すればできるか…? Windowsデスクトップアプリでやったことない orz)
  7. Confidential & Proprietary | 11 Webアプリの技術選定(ざっくり) • フロントエンド • React

    + TypeScript • 社内知見が多い • 画像処理エンジン • WebAssembly (WASM) • ブラウザ上でC++, Rustなどからコンパイルされたバイナリコードを実行できる • クライアントサイドでサクサク画像処理を行う(なるべく応答速度を早くする) • Rust • 既存Windowsアプリの画像処理はC++で実装されており、それを活用でも良かった しかし、WASMと相性が良い(事例が多い)といわれるRustを採用することにした • 社内の「新しいことガンガン挑戦しようぜ!」の風土の後押しもあった • imageクレートで画像処理をゴリゴリ実装 • cargo-llvm-covでテストカバレッジ計測 位置補正機能は計算量が多めなので 別スレッド(Web Worker)で Wasmファイルを実行するスタイルをとった
  8. 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アプリ同様の位置補正が可能
  9. Confidential & Proprietary | 工場 執務室 14 こうなった AdaInspector® Cloud

    検査用Windowsデスクトップアプリ 検査モデル SDK (.dll) ダウンロード Pass Fail 対象製品 Image Positioning Tool 検査装置 学習 & テスト image_positioning.dll (工場の検査設備に付属したPC)
  10. Confidential & Proprietary | 15 ざっくりとした実装の流れ この発表でみなさんも Rust + WebAssembly

    にチャレンジできれば良いなということで 簡単に実装の流れを共有しようと思います! Webアプリ 画像処理エンジン Workspace - web - core_lib Webフロントエンドとのデータやりとり 画像処理を実装 build WA .wasmを利用
  11. Confidential & Proprietary | 16 事前準備 (1) Wasmファイル作成環境 Wasmファイル(.wasm)を作成するため、wasm32-unknown-unknownがターゲットアーキテクチャに 入っていることを確認。

    入っていない場合は以下のコマンドで追加。 Rustが開発環境に入っている前提で進めますm(__)m 以下のコマンドでwasm-packをインストールする。 < RustコードをWasmファイルにビルドするために用います。
  12. Confidential & Proprietary | 17 事前準備 (2) プロジェクト作成 2つのライブラリプロジェクトの依存関係の一括管理や、 ビルド効率化などが可能となる

    sample_app └rust ├web │ ├src │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml └Cargo.toml
  13. 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用の インタフェース用コードが書き出される
  14. 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で実装するメリットは 無いかも。(遊んでみるだけなら別ですが)
  15. 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で追加できる。
  16. 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フロントエンド側に返すバイナリデータを生成
  17. 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のバインディングコードが出力される
  18. Confidential & Proprietary | 25 注意点 (2024/10/30時点) • ビルドターゲットwasm32-unknown-unknownですが、アクセスできるメモリは 最大2GiBで制限がかかっている。

    • 本プロダクトだと位置補正時(のための特徴探索)のパラメータ設定と、 入力する画像解像度次第ではドカッと制限に到達してしまうケースがあった • 制限にひっかかりそうなとき(フロントエンドで画像を入力したときに評価)は、 画像を分割してWASMにデータを渡すようにした。 • Rustバージョン1.82でwasm-bindgenを利用しているとwasm-packでビルドできない? • Rust 1.81で利用したほうが 良いかも。
  19. Confidential & Proprietary | 26 さいごに • テクニカルな構成をとっているが、無事Webアプリ化することができてよかった。 • このプロダクトが、弊社にとって初めて「Rustを利用したプロダクト」だった。

    • 最近はRust入門書がどんどん増えてきているので学習しやすくなってきてる! • もちろんアウトプットも大切!(なんかテキトーなアプリ作ってみるのもヨシッ!) <= Rustで初めて実装したもの。 (既存コードをRustに焼き直し) 年末にSlackのrandomチャンネルで 使われているemojiを集計しました。 我々はよく、褒めたり、感謝したり、 草を生やしたりします。