ホームページ > ウェブフロントエンド > jsチュートリアル > WebGPU はすごいです: 2 つの超高速 AI 画像処理ツールを構築しました!

WebGPU はすごいです: 2 つの超高速 AI 画像処理ツールを構築しました!

Linda Hamilton
リリース: 2024-11-06 03:00:02
オリジナル
760 人が閲覧しました

新興テクノロジー、特に AI に情熱を注ぐ Web エンジニアとして、私は Microsoft の onnxruntime-web ライブラリを研究してきました。この強力なツールを使用して、オンライン AI を活用した画像処理プラットフォームである BatchTool を開発しました。

ONNX Runtime Web は、ブラウザーおよび Node.js 上で ONNX モデルを実行するための Javascript ライブラリです。 ONNX ランタイム Web は、CPU と GPU の両方に最適化された ONNX モデル推論ランタイムを提供するために、WebAssembly および WebGL テクノロジーを採用しました。

現在、BatchTool は 2 つの主な機能を提供しています:

  1. 背景の一括削除
  2. オブジェクト/ウォーターマークのバッチ削除

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

BatchTool の主な機能

  • プライバシー第一: ローカル AI モデルを使用 - サーバーへのアップロードは不要
  • AI 搭載: 人工知能を活用して複雑なタスクを簡素化します
  • 高性能: WebGPU アクセラレーションにより、各画像をミリ秒単位で処理できます
  • 効率的なバッチ処理: ワンクリックで複数のファイルを処理
  • ユーザーフレンドリー: 学習の手間がかからないシンプルで直感的なインターフェイス
  • クロスプラットフォーム: ブラウザで動作します - インストールは必要ありません

背景の一括削除

モデルのダウンロード

背景の削除はブラウザ上で実行されるため、サーバーにアップロードする必要はありません。 初回使用時に対応するモデルをダウンロードするだけです。 その後、モデル ファイルはブラウザのキャッシュにキャッシュされ、次回使用するときに直接使用できます。

次の画面に表示されます: WebGPU ✅ は、現在のデバイスが WebGPU アクセラレーションをサポートしていることを示します。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

画像の選択

処理する画像を選択すると、バッチ ツールは現在の実行環境を自動的に検出し、現在の環境が WebGPU アクセラレーションをサポートしている場合は WebGPU アクセラレーション モードを有効にし、そうでない場合は自動的に CPU モードに切り替えます。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

画像の背景が削除されたら、[画像を比較] アイコンをクリックして、削除された背景の効果を確認します。

画像の出典: https://pixabay.com/

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

次に、[一括ダウンロード] ボタンをクリックして、処理されたすべての画像を一括ダウンロードします。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

オブジェクト/ウォーターマークのバッチ削除

モデルのダウンロード

背景の削除と同様、オブジェクトの削除はブラウザ上で実行され、サーバーにアップロードする必要はありません。初めて使用するときのみ、対応するモデルをダウンロードする必要があります。その後、モデル ファイルはブラウザのキャッシュにキャッシュされ、次回使用するときに直接使用できるようになります。

シナリオ 1

このシーンでは、複数の画像を一度に選択し、各画像に対してオブジェクトの消去操作を 1 つずつ実行できます。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

消去が完了したら、修復された 1 つの画像をすぐにダウンロードすることも、すべての画像が調整されるまで待ってから一度にすべてダウンロードすることもできます。

シナリオ 2

このシナリオは、同じサイズの複数の画像の同じ領域にあるウォーターマークを一括消去するのに適しています。手順も非常に簡単で、たったの 4 つの小さなステップです。

1.処理する複数の写真を選択します;
2.同じエリアのウォーターマークを一括消去モードを有効にします。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

3.最初の画像を選択し、ブラシで透かし領域を描きます;
4.リボンの修復ボタン(消しゴムアイコン)をクリックします。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

その後、プログラムが自動的に実行され、画像処理が完了すると、次の図に示すように、完成したロゴが右側のサムネイルに表示されます。

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

シナリオ 2 は、固定領域のウォーターマークをバッチで削除するのに非常に適しており、作業効率が大幅に向上します。コンピューターが WebGPU アクセラレーションをサポートしている場合、処理速度は非常に速くなり、1 つの画像の平均時間はわずか数百ミリ秒になります。

BatchTool の画像処理機能をぜひ試してみてください。ツールの使用中に問題が発生した場合は、お気軽にコメントを残してください。

以上がWebGPU はすごいです: 2 つの超高速 AI 画像処理ツールを構築しました!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート