Wasm×C++で実現するフロントエンドAI画像処理 / Frontend AI Image Processing with Wasm and C++

2025/11/30
フロントエンドカンファレンス関西2025
https://fortee.jp/fec-kansai-2025

Wasm×C++で実現するフロントエンドAI画像処理

渡邉 健
ソフトウェアエンジニア

Transcript

1. Wasm×C++で実現する フロントエンドAI画像処理 渡邉健 @フロントエンドカンファレンス関西2025
2. 自己紹介 • 渡邉 健 • 大学時代にAIの受託&SaaSを開発するスタートアップを 共同で創業 • KaminashiにM&Aして、引き続きAI周りのデリバリー
3. 1. Wasmを活用して作ったAIと画像処理のシステム 2. Wasmのメモリ管理の難しさ 3. 運用時の難しさと解決のアプローチ 今回話すこと
4. 1. Wasmを活用して作ったAIと画像処理のシステム 2. Wasmのメモリ管理の難しさ 3. 運用時の難しさと解決のアプローチ 今回話すこと
5. 食品ラベルって色々書いてある
6. 食品ラベルって色々書いてある 消費期限や成分を間違えて印刷 して出荷したら大惨事 🤯 なので、従来は目視で検査 これをAIによって検査して 楽にしたい
7. サーバ上で推論する方式 AIでの検査のよくあるパターン デメリット • 結果が帰るまでどうしても遅い • サーバの維持費がかなり高い • オフラインなんて到底無理
8. 　 さっきの検査が スマホの中でローカルで完結したら！？
9. 今からこいつを 検査します
10. デモの様子
11. AIや複雑な画像処理をどうブラウザで動かすのか Web Assembly (Wasm) の活用！ Webカメラから 画像の取得 AIによる検査 結果のレンダリング
12. AIや複雑な画像処理をどうブラウザで動かすのか Web Assembly (Wasm) の活用！ Webカメラから 画像の取得 AIによる検査 結果のレンダリング ここがWasmとして 実行される
13. • C++やRustなどの言語をコンパイルしたものをブラウザ上で実行できる • 一般的にJSのみで記述するより、処理速度は速くなる傾向にある • よく使われるOpenCV (画像処理用ライブラリ) とか ffmpeg (動画編集) などのライブラリは、事前にWasmにコンパイルされて、TSの型がつい た状態で呼び出せたりするものもある ◦ OpenCV.js ◦ ffmpeg.js Web Assembly (Wasm) とは？
14. Wasmのイメージ Wasmの世界 Webアプリケーションの世界 重い処理の依頼 結果を返す Wasm呼び出し 結果の取得 重い計算💦
15. Q. JSだけでできないの？ A. できるにはできるが実行速度が遅くなりがち - Wasmだとコンパイラによる最適化がグッとかけられる - 重い演算を並列で実行できる手法がある (SIMD) - そもそもAIとか画像処理が動かせるようなライブラリはC++や Pythonに比べて著しく乏しい AIや複雑な画像処理をどうブラウザで動かすのか
16. 1. Wasmを活用して作ったAIと画像処理のシステム 2. Wasmのメモリ管理の難しさ 3. 運用時の難しさと解決のアプローチ 今回話すこと
17. 当初は、OpenCV.jsを活用 • 画像処理ライブラリOpenCVをWasmにコンパイルしてブラウザ から利用できるライブラリ OpenCV.js https://docs.opencv.org/4.x/d5/d10/tutorial_js_root.html • OpenCVでできることをWasmのことをあまり考えずに、Package をインストールするだけで使えて便利 Wasmのメモリ管理の難しさ
18. OpenCV.jsの例 let src = cv.imread('canvasInput'); let gray = new cv.Mat(); let dst = new cv.Mat(); // グレースケール化 cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); // 二値化 cv.threshold(gray, dst, 110, 255, cv.THRESH_BINARY); cv.imshow('canvasOutput', dst); src.delete(); gray.delete(); dst.delete(); Wasmのメモリ管理の難しさ
19. Wasmでメモリを確保 let src = cv.imread('canvasInput'); let gray = new cv.Mat(); let dst = new cv.Mat(); // グレースケール化 cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); // 二値化 cv.threshold(gray, dst, 110, 255, cv.THRESH_BINARY); cv.imshow('canvasOutput', dst); src.delete(); gray.delete(); dst.delete(); Wasmのメモリ管理の難しさ Wasmの世界 srcの画像のメモリ grayスケール後の 画像のメモリ dstの画像のメモリ
20. Deleteするとメモリが解放 let src = cv.imread('canvasInput'); let gray = new cv.Mat(); let dst = new cv.Mat(); // グレースケール化 cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); // 二値化 cv.threshold(gray, dst, 110, 255, cv.THRESH_BINARY); cv.imshow('canvasOutput', dst); src.delete(); gray.delete(); dst.delete(); Wasmのメモリ管理の難しさ Wasmの世界 srcの画像のメモリ grayスケール後の 画像のメモリ dstの画像のメモリ
21. 解放せず何回も呼び出すと let src = cv.imread('canvasInput'); let gray = new cv.Mat(); let dst = new cv.Mat(); // グレースケール化 cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); // 二値化 cv.threshold(gray, dst, 110, 255, cv.THRESH_BINARY); cv.imshow('canvasOutput', dst); src.delete(); gray.delete(); dst.delete(); Wasmのメモリ管理の難しさ Wasmの世界 srcの画像のメモリ grayスケール後の 画像のメモリ dstの画像のメモリ srcの画像のメモリ grayスケール後の 画像のメモリ
22. 解放せず何回も呼び出すと let src = cv.imread('canvasInput'); let gray = new cv.Mat(); let dst = new cv.Mat(); // グレースケール化 cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); // 二値化 cv.threshold(gray, dst, 110, 255, cv.THRESH_BINARY); cv.imshow('canvasOutput', dst); src.delete(); gray.delete(); dst.delete(); Wasmのメモリ管理の難しさ Wasmの世界 srcの画像のメモリ grayスケール後の 画像のメモリ dstの画像のメモリ srcの画像のメモリ grayスケール後の 画像のメモリ ここでクラッシュ→
23. このメモリリークが乱発 • ラベル検査では非常に多くの処理を施す過程で、たくさんのメモ リを確保する • その上で検査を繰り返し続けるので、一つの変数でも解放し損ね ると致命的な問題を引き起こす Wasmのメモリ管理の難しさ
24. OpenCV.jsを活用するのをやめて Wasmの検査処理を我々が C++で全て実装 Wasmのメモリ管理の難しさ
25. 実装の流れ Wasmのメモリ管理の難しさ #include <emscripten/bind.h> class Calculator { public: int add(int a, int b) { return a + b; } }; EMSCRIPTEN_BINDINGS(calculator_module) { emscripten::class_<Calculator>("Calculator") .constructor<>() .function("add", &Calculator::add); } 自動生成される Wasmを呼び出すJS Wasmファイル emcc /src/src/calc.cpp -o /src/calc.js
26. 実装の流れ Wasmのメモリ管理の難しさ #include <emscripten/bind.h> class Calculator { public: int add(int a, int b) { return a + b; } }; EMSCRIPTEN_BINDINGS(calculator_module) { emscripten::class_<Calculator>("Calculator") .constructor<>() .function("add", &Calculator::add); } 自動生成される Wasmを呼び出すJS Wasmファイル emcc /src/src/calc.cpp -o /src/calc.js const Module = await WasmModule(); const obj = new Module.Calculator(); try { obj.add(); } finally { obj.delete(); }
27. Wasmの世界 Webアプリケーションの 世界 検査処理を集約 C++ 写真撮影 JavaScript Wasmのメモリ管理の難しさ メモリ解放 メモリ解放を検査のたびに一回に減らせる
28. deleteをしなくてもいい方法はあるのか？ • 基本的には、明示的にdeleteをした方が安全ではあるが、 deleteをしなくてもGCが効く手法がいくつかあるにはある Wasmのメモリ管理の難しさ
29. 値Objectを使う場合 Wasmのメモリ管理の難しさ const person = new Module.Person(); person.name = "Taro"; person.age = 20; struct Person {. std::string name; int age; }; // 構造体 Person を値オブジェクトとして JavaScript から呼び出せるように設定 EMSCRIPTEN_BINDINGS(my_module) { value_object<Person>("Person") .field("name", &Person::name) .field("age", &Person::age); C++ JavaScript
30. スマートポインタを使う Wasmのメモリ管理の難しさ function foo() { const obj = new Module.MyObject(); // fooのスコープが外れたら自動的にGCされ る } #include <emscripten/bind.h> class MyObject { public: MyObject() { } ~MyObject() { } Result doSomething() { return new Result(); } }; EMSCRIPTEN_BINDINGS(my_module) { emscripten::class_<MyObject>("MyObject") .smart_ptr_constructor("MyObject", &std::make_shared<MyObject>); } C++ JavaScript
31. using宣言を使う Wasmのメモリ管理の難しさ using obj = new Module.MyObject(); obj.method(); // 処理がスコープから外れると自動で obj.delete() が呼ばれる Wasmを利用する 開発者が記述するJavaScript // Support `using ...` from https://github.com/tc39/proposal-explicit-res ource-management. const symbolDispose = Symbol.dispose; if (symbolDispose) { proto[symbolDispose] = proto['delete']; } emccが自動生成した Wasmの呼び出しJS
32. あくまでdeleteをしておいた方がいい Wasmのメモリ管理の難しさ https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.h tml#automatic-memory-management
33. 開発時の余談 • AI開発とフロントエンド開発を完全に分業していたため、 局所最適化された実装がまとまってしまった (≠全体最適) ◦ Wasmとそれを呼び出す処理の開発 ◦ カメラ動画の繋ぎ込み • 複数コンポーネントにまたがって、検査ロジックがいろんなファイルに散 らばる • useEffectの大量発生 • キャッシュ戦略の無考慮・重めのwasmファイルを何度もfetchしてたり Wasmのメモリ管理の難しさ
34. 結果的に • 並列化できるところは並列に • ロジックの凝集性を高くもつ • 複数のカスタムフックごとに責務を小さ く 　　➡ カメラの起動時間 & 検査速度の向上 (全体最適に近づく) リリース時にこれはやばいので超リファクタリング 実行のフローの整理
35. 1. Wasmを活用して作ったAIと画像処理のシステム 2. Wasmのメモリ管理の難しさ 3. 運用時の難しさと解決のアプローチ 今回話すこと
36. 1. 「メモリリーク起きていないか」「速度が落ちていない か」の品質保証 2. 導入時に、Wasmが動かないことがあったトラブル 3. ユーザ環境で何が行われているかモニタリングの手段 運用時におけるクライアントでAIを処理する ならでは問題
37. １. Wasmの品質を確保する • Wasmでの機能追加にともなって、 検査速度が落ちたり、実装ミスによって、メモリリーク が起きたら困るため、 一定ラインの品質を確かめてデプロイしたい
38. １. Wasmの品質を確保する Wasmのレポジトリ フロントエンドのレ ポジトリ Wasmの変更 GitHub Actions Build Wasmの生成 AWS Code Artifact NPM Package NPM Package NPM Package Wasmファイル NPM Package Wasmのデリバリー
39. １. Wasmの品質を確保する Wasmのレポジトリ フロントエンドのレ ポジトリ Wasmの変更 GitHub Actions Build Wasmの生成 AWS Code Artifact NPM Package NPM Package NPM Package Wasmファイル NPM Package ブラウザで動作させ、メモリ・速度に問題がないか Playwrightで メモリ・検査速度の確認
40. ２. 検査機能導入時の課題 • OSやブラウザのバージョン差で動作しないケース • 導入後に速度不足などの問題が発生
41. • 数百回の検査をユーザの端末で実行し メモリ遷移・検査時間の収集 • 導入可否の判断に活用でき、 導入後のトラブル削減 ２. 検査機能導入時の課題 導入したいユーザ環境でベンチマークを測定する アプリの配布
42. ３. ユーザ環境で何が行われているかモニタリング サーバ環境と違い、クライアントの検査なので、そもそもモ ニタリングがしづらい 1. 検査がクラッシュすることがたまにあり、それを検知し て調査したい 2. 検査の快適さを測定したい
43. ３. ユーザ環境で何が行われているかモニタリング • サーバ推論と違い、クライアント推論では運用データを直接取得しづらい ◦ クラッシュしてしまった場合はSentryでアラートを出して分析をする • MLOps的に必要な項目を定義し、検査完了時に送信できるようにする 1. 検査一回あたりの時間 2. 検査完了までの時間 ３. ユーザ環境で何が行われているかモニタリングの手段
44. 定量的な分析だけだと難しい • 検査完了時間などは、ユーザの利用の仕方に依存して、 大きく揺れる • 検査精度は、事前にテンプレートで設定したラベルの設 定の仕方の問題によって精度が揺れる ３. ユーザ環境で何が行われているかモニタリングの手段
45. ３. ユーザ環境で何が行われているかモニタリングの手段 内製のダッシュボードを作って、 なぜ検査に失敗するか分析もする
46. 最後に • 今回Wasmでの画像処理を主に説明したが、 もっと様々な箇所で活用できる • RustやC++を始め様々な言語のコードをコンパイルでき るし、ぜひ活用してみてください
47. ご清聴ありがとうございました！