Slide 1

Slide 1 text

Rust + WebAssembly を使って高速な画像処理を Webアプリで実行しよう! Rust ランチLT大会 - 企業でのRust活用事例 株式会社アダコテック プロダクト開発部 井上(SHINue_rebonire)

Slide 2

Slide 2 text

Confidential & Proprietary | C#はいいぞ! 2 自己紹介 井上真嘉 (SHINue_rebonire) / @rebonire_itame 株式会社アダコテック プロダクト開発部 エンジニア 好き:ホラー小説・映画、タコス、ちいかわ 2024 2020 2013 光学機器メーカ アダコテック ハード/ソフトウェアエンジニア ソフトウェアエンジニア 電気設計, ときどき光学設計 Rustもいいぞ!! Windowsデスクトップアプリ開発 画像処理 データ分析, 機械学習 Webアプリ開発 (FE, BE)

Slide 3

Slide 3 text

Confidential & Proprietary | 3 本日の内容 ● Rustを利用したプロダクトの紹介 ● 技術選定 ● 簡単に実装の流れ ● さいごに C#はいいぞ! 2024 2020 2013 電気設計, ときどき光学設計 Rustもいいぞ!! Windowsデスクトップアプリ開発 画像処理 データ分析, 機械学習 Webアプリ開発 (FE, BE) このときのおはなし

Slide 4

Slide 4 text

Confidential & Proprietary | 4 アダコテックについて

Slide 5

Slide 5 text

Confidential & Proprietary | 5 画像検査AIモデル作成ツール AdaInspector® Cloud 画像検査モデル作成ツール AdaInspector® Cloudでは、 HLAC特徴抽出法を用いた独自の画像検査AIモデルをクラウド上で作成(とテストが)できる。

Slide 6

Slide 6 text

Confidential & Proprietary | 6 弊社プロダクトの利用例 作成したモデルは弊社が提供するSDKに対応したソフトウェアにて推論実行可能。 AdaInspector® Cloud 検査用Windowsデスクトップアプリ 検査モデル SDK (.dll) (工場の検査設備に付属したPC) ダウンロード アップロード(例えばパラメタチューニングのために) Pass Fail 執務室 工場 対象製品 検査装置 学習 & テスト

Slide 7

Slide 7 text

Confidential & Proprietary | 7 検査精度の改善のために 対象製品(オブジェクト)の位置が各画像で揃っていると、より高精度な検査が可能となる。 しかし、画像を取得する機器・機構の都合上、必ず同じ場所に製品が来ないこともある。 そのときは、「画像処理でオブジェクト位置を揃えてあげる(位置補正)」ことをする。 ・・・ ・・・ ・・・ ・・・ こうなっているよりも このほうがいいな

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Confidential & Proprietary | 10 Webアプリ化すればいいじゃない …ということで つよつよ テックリード つよつよ PdM やろう!! やったぜ!

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Confidential & Proprietary | 12 Rustの良いところ さまざまなところでRustの良さは語られている 公式(https://www.rust-lang.org)に書かれていることが全てかもしれない 特にメモリ安全に関しては C++おじさんだったぼくも にっこり 正直コレが良かった! cargoの便利さ エラーメッセージの優しさ

Slide 13

Slide 13 text

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アプリ同様の位置補正が可能

Slide 14

Slide 14 text

Confidential & Proprietary | 工場 執務室 14 こうなった AdaInspector® Cloud 検査用Windowsデスクトップアプリ 検査モデル SDK (.dll) ダウンロード Pass Fail 対象製品 Image Positioning Tool 検査装置 学習 & テスト image_positioning.dll (工場の検査設備に付属したPC)

Slide 15

Slide 15 text

Confidential & Proprietary | 15 ざっくりとした実装の流れ この発表でみなさんも Rust + WebAssembly にチャレンジできれば良いなということで 簡単に実装の流れを共有しようと思います! Webアプリ 画像処理エンジン Workspace - web - core_lib Webフロントエンドとのデータやりとり 画像処理を実装 build WA .wasmを利用

Slide 16

Slide 16 text

Confidential & Proprietary | 16 事前準備 (1) Wasmファイル作成環境 Wasmファイル(.wasm)を作成するため、wasm32-unknown-unknownがターゲットアーキテクチャに 入っていることを確認。 入っていない場合は以下のコマンドで追加。 Rustが開発環境に入っている前提で進めますm(__)m 以下のコマンドでwasm-packをインストールする。 < RustコードをWasmファイルにビルドするために用います。

Slide 17

Slide 17 text

Confidential & Proprietary | 17 事前準備 (2) プロジェクト作成 2つのライブラリプロジェクトの依存関係の一括管理や、 ビルド効率化などが可能となる sample_app └rust ├web │ ├src │ │ └lib.rs │ └Cargo.toml ├core_lib │ ├src │ │ └lib.rs │ └Cargo.toml └Cargo.toml

Slide 18

Slide 18 text

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用の インタフェース用コードが書き出される

Slide 19

Slide 19 text

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で実装するメリットは 無いかも。(遊んでみるだけなら別ですが)

Slide 20

Slide 20 text

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で追加できる。

Slide 21

Slide 21 text

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フロントエンド側に返すバイナリデータを生成

Slide 22

Slide 22 text

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のバインディングコードが出力される

Slide 23

Slide 23 text

Confidential & Proprietary | 23 WebアプリからWasmファイルを実行 もう少し詳細な実装は以下のブログに 記載しています!

Slide 24

Slide 24 text

Confidential & Proprietary | 24 実行! TypeScriptに画像処理実装 Rust+WebAssemblyで実装 282msec 7,076msec 処理時間 画像処理がサクッと実行された!

Slide 25

Slide 25 text

Confidential & Proprietary | 25 注意点 (2024/10/30時点) • ビルドターゲットwasm32-unknown-unknownですが、アクセスできるメモリは 最大2GiBで制限がかかっている。 • 本プロダクトだと位置補正時(のための特徴探索)のパラメータ設定と、 入力する画像解像度次第ではドカッと制限に到達してしまうケースがあった • 制限にひっかかりそうなとき(フロントエンドで画像を入力したときに評価)は、 画像を分割してWASMにデータを渡すようにした。 • Rustバージョン1.82でwasm-bindgenを利用しているとwasm-packでビルドできない? • Rust 1.81で利用したほうが 良いかも。

Slide 26

Slide 26 text

Confidential & Proprietary | 26 さいごに • テクニカルな構成をとっているが、無事Webアプリ化することができてよかった。 • このプロダクトが、弊社にとって初めて「Rustを利用したプロダクト」だった。 • 最近はRust入門書がどんどん増えてきているので学習しやすくなってきてる! • もちろんアウトプットも大切!(なんかテキトーなアプリ作ってみるのもヨシッ!) <= Rustで初めて実装したもの。 (既存コードをRustに焼き直し) 年末にSlackのrandomチャンネルで 使われているemojiを集計しました。 我々はよく、褒めたり、感謝したり、 草を生やしたりします。

Slide 27

Slide 27 text

Rustはいいぞ!