Web Worker の画像処理の基礎
Web ワーカーは、エディターのメインスレッドにすべての作業を行わせることなく、負荷の高い計算を実行できる独立した JavaScript 実行コンテキストです。ブラウザーの画像処理の場合、これは、モデルのセットアップと推論が、ボタン、進行状況メッセージ、ブラシ入力、画面の更新を担当するスレッドから実行される可能性があることを意味します。
その結果は「無料のバックグラウンド処理」ではありません。同じデバイスが引き続き計算を実行し、メモリを使用します。アーキテクチャ上の利点は分離です。つまり、重いモデル操作が実行中にすべてのインターフェイスの応答をブロックする可能性が低くなります。
メインスレッドにはユーザー インターフェイス ジョブがあります
通常、ブラウザ ページはメイン スレッドで JavaScript を実行します。このスレッドは、レイアウト、ペイント、入力も調整します。 1 つの長い計算が占有すると、クリックが遅く感じられたり、アニメーションが停止したり、ブラウザーからページが応答しないと警告される場合があります。
画像エディターには、推論が開始される前に、メインスレッドとしての多くの役割があります。
- ファイルの選択を受け取り、貼り付け、またはドロップします。
- 画像をデコードして表示します。
- 進行状況とエラー状態を更新します。
- プレビュー キャンバスを描画します。
- ブラシの動きの追加と消去を処理します。
- ダウンロードまたはクリップボードのアクションを準備します。
セグメンテーション モデルの数値処理を同じスレッドに配置すると、それらのタスクが直接競合することになります。作業者はより明確な境界を作成します。
メッセージベースの境界
エディターとワーカーは通常の変数を共有しません。彼らはメッセージを送信することでコミュニケーションをとります。簡略化したフローは次のようになります。
- エディターはワーカーを作成または再利用します。
- ワーカーに推論ランタイムとモデルを初期化するように要求します。
- 画像データを用意し、推論リクエストを送信します。
- ワーカーはデータをモデルの予期される入力に変換します。
- ワーカーはモデルを実行し、マスク値を生成します。
- マスクまたは結果データを送り返します。
- エディターはプレビューを合成し、調整またはエクスポートを可能にします。
メッセージには、正しいリクエストに対する応答を照合するのに十分なコンテキストが含まれている必要があります。これは、前のジョブが終了する前にユーザーが別の画像を選択した場合に重要になります。インターフェイスでは、新しいソースの上に古い結果が表示されることを避ける必要があります。
画像データのコピーと転送
短いテキストメッセージの送信は安価です。ブラウザがバッファ全体をコピーする必要がある場合、数百万のピクセル値を送信するとコストがかかる可能性があります。 Web API は、代わりに特定のバイナリ バッファの所有権を転送できます。転送されたバッファは、送信側で使用可能な複製を保持せずに、受信側で使用できるようになります。
この最適化には設計上の制約があります。転送後、送信側はまだデータを所有しているかのように同じバッファを使用し続けることはできません。エディターは、別個の表示表現を保持したり、専用の推論バッファーを作成したり、後で必要なものを再構築したりできます。
すべての実装がまったく同じ場所で転送を使用するわけではありません。一般的な教訓は、スレッドの分離によってデータの移動がなくなるわけではないということです。画像のサイズ、バッファ サイズ、変換数は依然としてレイテンシとメモリに影響します。
Easy Background Remover がワーカーに与えるもの
Easy Background Remover は、オンデバイス セグメンテーションにブラウザ推論ランタイムを備えた Web ワーカーを使用します。高度な自動切り抜きステップによりマスクが作成されます。エディターは合成結果を表示し、CPU キャンバス ブラシの調整をサポートします。
この分離により、障害により有用な境界が与えられます。推論中にワーカーが初期化できないかクラッシュした場合、インターフェイスは永続的に凍結されたタブを唯一の信号として依存するのではなく、ワーカー関連のエラーを報告できます。
また、ローカル処理の主張も理解しやすくなります。拡張機能ページからその独自のワーカーへのピクセルの送信は、ブラウザ環境内の通信であり、リモート カットアウト API へのアップロードではありません。最初のセッションでは、再利用可能なモデル アセットを個別にダウンロードできます。 最初の実行でモデルがダウンロードされる理由 を参照してください。
ワーカーは計算を瞬時に行わない
ワーカーは、生のデバイスの機能ではなく、応答性を向上させます。モデルは、ブラウザーが提供できるものに応じて、CPU、GPU、またはその他のランタイム リソースを引き続き消費します。大きな入力は、小さな入力よりも時間がかかり、より多くのメモリを必要とする可能性があります。
いくつかの制限が残っています。
- モデルの初期化には実際のコストがかかります。
- ピクセル バッファーはコピーされると両側のメモリを占有します。
- サイズ変更とフォーマット変換には時間がかかります。
- メモリが少ないデバイスでは、大きな画像を扱うのに苦労する可能性があります。
- ワーカーを増やすと、競合が減少するのではなく増加する可能性があります。
- エクスポートとキャンバスの更新には、引き続きメインスレッドが関与する可能性があります。
5 つの画像に対して 5 つの推論ワーカーを開始しても、自動的に 5 倍高速になるわけではありません。労働者は同じ機械を共有します。並列ジョブはメモリ帯域幅と実行リソースをめぐって競合する可能性がありますが、各モデル インスタンスには独自のメモリ コストがかかる場合があります。
進捗報告は協力的です
ワーカーはステータス メッセージを送信できますが、正確に感じられる進捗率は自動的にはわかりません。モデルのダウンロード、ランタイムの初期化、入力の準備、推論、マスク変換、プレビュー レンダリングは、タイミングが異なる別個のフェーズです。
一部のフェーズには測定可能なバイト数があります。単一のモデルの実行では、「開始」と「終了」のみが公開されます。したがって、均一に進む滑らかなパーセンテージは、正確な測定というよりも表面的なものになる可能性があります。
便利な進行状況 UI では、可能な場合、モデルの準備、画像の処理、結果の構築などのフェーズに名前が付けられます。また、何も説明せずにスピナーを放置するのではなく、失敗やキャンセルも処理します。
キャンセルはスピナーを隠すだけではありません
ユーザーが画像を閉じるか最初からやり直すと、インターフェイスは古いリクエストからの最終的な応答を無視できます。基礎となる計算を直ちに停止するには、ランタイムからの追加サポート、またはワーカーの終了と再作成が必要になる場合があります。
ワーカーを終了することは決定的ですが、ワーカーの初期化された状態は破棄されます。次のジョブでは、モデルを再度ロードして初期化する必要がある場合があります。操作が短い場合は、結果を古いとマークした方が、すべてを破棄するよりもコストが安くなる可能性があります。
正しい選択は、メモリ負荷、操作時間、実行時の機能によって異なります。ユーザーの観点から見ると、重要なルールは、古い作業によって現在の編集内容が上書きされてはならないということです。
エラーも境界を越える必要がある
ワーカー内の例外は、通常のメインスレッド例外にはなりません。ワーカーは使用可能なエラーを報告する必要があり、エディターはワーカー レベルのエラーをリッスンする必要があります。
適切なエラー処理では、少なくとも次の点が区別されます。
- モデル アセットが利用できません。
- モデルの初期化に失敗しました。
- 画像のデコードまたは入力の準備に失敗しました。
- 推論が失敗しました。
- 作業者が予期せず停止しました。
- 結果は現在のリクエストに属しなくなりました。
これは、特に初回実行のセットアップと通常の画像処理で対処法が異なる場合に、一般的な「問題が発生した」というメッセージよりも実用的です。
ワーカー出力はまだ最初のマスクにすぎません
スレッド アーキテクチャは、それ自体では曖昧なエッジを改善しません。作業者は、毛皮、透明な素材、細いストラップ、または必要な影が欠けている技術的に有効なマスクを返却できます。これらはセグメンテーションと意図に関する質問です。
エディターのジョブは推論後に再開されます。つまり、マスクを作業座標系に拡大縮小し、プレビューを合成し、ユーザーが調整して、現在の状態をエクスポートします。 マスク解像度とプレビュー サイズ は、これらの座標系を混同すべきではない理由を説明しています。
簡潔なメンタルモデル
ワーカーは、メッセージ ウィンドウの向こうにいる地元の専門家であると考えてください。
- 編集者がインタラクションを所有します。
- ワーカーは重い推論タスクを所有します。
- バイナリ画像データが定義された境界を越える。
- ワーカーは、すべてのエッジについての完成した判断ではなく、マスクを返します。
- 編集者は引き続き現在の状態、レビュー、改良、エクスポートを担当します。
ピクセル自体のモデルのビューについては、オンデバイス カットアウト モデルが表示するもの に進んでください。エンドツーエンドの実践的な概要については、ローカル背景除去の仕組み を参照してください。