Tokopedia は、インドネシアのテクノロジー企業です。同社は、最大級の e コマース マーケットプレイスを運営しており、40 以上のデジタル プロダクトと 1, 400 万以上の登録販売者をプラットフォームに擁しています。
Tokopedia のビジネス バーティカルの一部である Mitra Tokopedia は、小規模ビジネス オーナーがクレジットやゲームのクーポン、データ パッケージ、電力トークン、国民健康保険の請求書などのデジタル商品を販売するのに役立つウェブ アプリケーションです。このウェブサイトは、700 以上の都市にいる Mitra Tokopedia の販売者にとって主要なチャネルの 1 つであるため、スムーズなユーザー エクスペリエンスを確保することが重要です。
オンボーディング プロセスの重要なステップとして、これらの販売者は本人確認を行う必要があります。販売者は、販売者確認を完了するために、国民 ID と、その ID を持った自撮り写真をアップロードする必要があります。これは、顧客確認（KYC）プロセスと呼ばれます。
Mitra Tokopedia は、ウェブアプリ内のこの重要な KYC プロセスに ML 機能を追加することで、検証エラーを 20% 以上削減し、ユーザー エクスペリエンスを向上させることができました。また、手動による承認を 70% 近く削減することで、運用コストを削減しました。
課題
KYC データのほとんどが拒否され、手動検証のためにオペレーション チームに毎週数千件のチケットが作成されていました。これにより、運用コストが高くなるだけでなく、販売者の本人確認プロセスが遅れ、ユーザー エクスペリエンスの低下につながっていました。不承認の最大の理由は、販売者が ID カードを持った自撮り写真を正しくアップロードしなかったことです。Mitra Tokopedia は、最新のウェブ機能を使用して、この問題をスケーラブルに解決したいと考えていました。
解決策
Tokopedia のチームは、KYC プロセスの最初のステップ（ユーザーが画像をアップロードするとき）で、TensorFlow.js を使用した ML でこの問題を解決することにしました。MediaPipe と TensorFlow の顔検出ライブラリを使用して、販売者が ID カードと自撮り写真をアップロードしたときに、6 つのキーポイントで販売者の顔を検出しました。モデルの出力は、受け入れ基準との照合に使用されます。検証が成功すると、情報がバックエンドに送信されます。確認に失敗すると、販売者にエラー メッセージと再試行のオプションが表示されます。ハイブリッドなアプローチが使用され、モデルはスマートフォンの仕様に応じて、デバイス上またはサーバー側で推論を実行します。ローエンド デバイスはサーバーで推論を実行します。
KYC プロセスの早い段階で ML モデルを使用することで、次のことが可能になります。
- KYC プロセスでの不承認率を改善する。
- モデルによって評価された品質に基づいて、画像が不承認となる可能性があることをユーザーに警告します。
他のソリューションではなく ML を選択する理由
ML を使用すると、手動で行うと時間がかかる、または実用的でない反復タスクを自動化できます。Tokopedia の場合、現在の ML 以外のソリューションを最適化しても大きな成果は得られませんでしたが、ML ソリューションを使用することで、毎週何千もの承認を手動で処理しなければならなかった運用チームの負荷を大幅に軽減できました。ML ソリューションを使用すると、画像チェックをほぼ瞬時に行うことができるため、ユーザー エクスペリエンスが向上し、運用効率が向上します。問題のフレーム処理の詳細を読み、ML が問題の解決に適した方法かどうかを判断します。
モデルを選択する際の考慮事項
ML モデルを選択する際に、次の要素が考慮されました。
費用
モデルの使用にかかる全体的な費用を評価しました。TensorFlow.js は Google が適切にメンテナンスしているオープンソース パッケージであるため、ライセンス費用とメンテナンス費用を節約できます。もう 1 つの考慮事項は、推論のコストです。クライアント側で推論を実行できると、高価な GPU を使用してサーバー側で処理する場合と比較して、特にデータが無効で使用できないことが判明した場合に、大幅なコスト削減になります。
スケーラビリティ
モデルとテクノロジーの拡張性を考慮しました。プロジェクトの進化に伴うデータとモデルの複雑さの増大に対応できるか？他のプロジェクトやユースケースに対応するように拡張できますか？モデルを CDN でホストしてクライアント側に配信できるため、デバイス上の処理は非常にスケーラブルです。
パフォーマンス
ライブラリのサイズ（KB 単位）とランタイム プロセスのレイテンシを考慮しました。Mitra Tokopedia のユーザーベースの大部分は、インターネット速度と接続性が中程度のミドルエンドからローエンドのデバイスを使用しています。そのため、ダウンロードとランタイム（モデルが出力を生成する速度）のパフォーマンスは、特定のニーズに対応し、優れたユーザー エクスペリエンスを確保するための最優先事項です。
その他の考慮事項
規制遵守: 選択したライブラリが、関連するデータ保護とプライバシーに関する規則を遵守していることを確認する必要がありました。
スキルセット: チームの専門知識とスキルセットを評価しました。一部の ML フレームワークとライブラリでは、特定のプログラミング言語や特定の分野の専門知識が必要になる場合があります。これらの要素を考慮することで、機械学習（ML）プロジェクトに適したモデルを選択する際に、情報に基づいた意思決定を行うことができました。
テクノロジーの選択
これらの要素を考慮した結果、TensorFlow.js がニーズに合致していることがわかりました。WebGL バックエンドを使用してデバイスの GPU を使用することで、完全にオンデバイスで実行できます。デバイスでモデルを実行すると、サーバーのレイテンシが短縮され、サーバーのコンピューティング費用が削減されるため、ユーザーへのフィードバックが高速化されます。オンデバイス ML の詳細については、オンデバイス ML の利点と制限事項をご覧ください。
「TensorFlow.js は、Google が提供する JavaScript デベロッパー向けのオープンソースの ML ライブラリで、ブラウザのクライアントサイドで実行できます。WebGL、WebAssembly、WebGPU バックエンド オペレーターを包括的にサポートしており、ブラウザ内で高速に動作する、Web AI の最も成熟したオプションです。 Adobe が TensorFlow.js でウェブ ML を使用して Photoshop for Web を強化した方法
技術実装
Mitra Tokopedia は、MediaPipe と TensorFlow の顔検出ライブラリを使用しました。これは、リアルタイムの顔検出を実行するためのモデルを提供するパッケージです。具体的には、このソリューションでは、このライブラリで提供されている MediaPipeFaceDetector-TFJS モデルを使用しました。このモデルは tfjs ランタイムを実装しています。
実装に入る前に、MediaPipe の概要を簡単に説明します。MediaPipe を使用すると、モバイル（Android、iOS）、ウェブ、デスクトップ、エッジデバイス、IoT にわたってオンデバイス ML ソリューションを構築してデプロイできます。
この記事の執筆時点で、MediaPipe には 14 種類のソリューションが用意されています。mediapipe または tfjs ランタイムを使用できます。tfjs ランタイムは JavaScript で構築されており、ウェブ アプリケーションが外部からダウンロードできる JavaScript パッケージを提供します。これは、C++ でビルドされ、WebAssembly モジュールにコンパイルされる mediapipe ランタイムとは異なります。主な違いは、パフォーマンス、デバッグのしやすさ、バンドルです。JavaScript パッケージは、webpack などの従来のバンドラでバンドルできます。一方、Wasm モジュールは、より大きく、独立したバイナリ リソースであり（読み込み時の依存関係ではないことで軽減されます）、別の Wasm デバッグ ワークフローが必要です。ただし、技術要件とパフォーマンス要件を満たすために、実行速度は向上します。
Tokopedia の実装に戻り、最初のステップとして、次のようにモデルを初期化します。ユーザーが写真をアップロードすると、HTMLImageElement が入力として検出機能に渡されます。
// Create the detector.
const model = faceDetection.SupportedModels.MediaPipeFaceDetector;
const detectorConfig = {
runtime: 'tfjs'
};
const detector = await faceDetection.createDetector(model, detectorConfig);
// Run inference to start detecting faces.
const estimationConfig = {flipHorizontal: false};
const faces = await detector.estimateFaces(image, estimationConfig);
顔リストの結果には、画像内の各顔について検出された顔が含まれます。モデルが顔を検出できない場合、リストは空になります。各顔について、検出された顔の境界ボックスと、検出された顔の 6 つのキーポイントの配列が含まれています。これには、目、鼻、口などの特徴が含まれます。各キーポイントには、x と y、および名前が含まれます。
[
{
box: {
xMin: 304.6476503248806,
xMax: 502.5079975897382,
yMin: 102.16298762367356,
yMax: 349.035215984403,
width: 197.86034726485758,
height: 246.87222836072945
},
keypoints: [
{x: 446.544237446397, y: 256.8054528661723, name: "rightEye"},
{x: 406.53152857172876, y: 255.8, "leftEye },
...
],
}
]
box は、画像ピクセル空間内の顔の境界ボックスを表します。xMin、xMax は x 境界、yMin、yMax は y 境界、width、height は境界ボックスの寸法を表します。keypoints の場合、x と y は、画像ピクセル空間内の実際のキーポイント位置を表します。name は、キーポイントのラベルを提供します。それぞれ 'rightEye'、'leftEye'、'noseTip'、'mouthCenter'、'rightEarTragion'、'leftEarTragion' です。この投稿の冒頭で述べたように、販売者は販売者確認を完了するために、国民 ID と ID を持った自撮り写真をアップロードする必要があります。モデルの出力は、承認基準に照らしてチェックされます。つまり、前述の 6 つのキーポイントが一致していることが、有効な身分証明書と自撮り写真と見なされる条件となります。
確認が成功すると、関連する販売者情報がバックエンドに渡されます。確認に失敗すると、販売者に失敗メッセージと再試行のオプションが表示されます。バックエンドに情報は送信されません。
ローエンド デバイスのパフォーマンスに関する考慮事項
このパッケージは 24.8 KB（縮小および gzip 圧縮済み）のみで、ダウンロード時間に大きな影響はありません。ただし、非常にローエンドのデバイスでは、ランタイム処理に時間がかかります。2 つの画像を ML 顔検出モデルに渡す前に、デバイスの RAM と CPU を確認するロジックが追加されました。
デバイスの RAM が 4 GB を超え、ネットワーク接続が 4G を超え、CPU が 6 コアを超える場合、画像は顔認証のためにオンデバイス モデルに渡されます。これらの要件が満たされない場合、オンデバイス モデルはスキップされ、画像は検証のためにサーバーに直接送信されます。これは、古いデバイスに対応するためのハイブリッド アプローチです。ハードウェアの進化に伴い、時間の経過とともに、より多くのデバイスがサーバーからコンピューティングをオフロードできるようになります。
影響
ML の統合により、Tokopedia は高い拒否率を解決し、次のような結果を得ることができました。
- 拒否率が 20% 以上低下しました。
- 手動による承認の数がほぼ 70% 減少。
これにより、販売者のユーザー エクスペリエンスが向上しただけでなく、Tokopedia チームの運用コストも削減されました。
まとめ
全体として、このケーススタディの結果は、適切なユースケースにおいて、ウェブ上のオンデバイス ML ソリューションが、ユーザー エクスペリエンスと機能の有効性の向上、コスト削減、その他のビジネス上のメリットの創出に役立つことを示しています。
MediaPipe Studio と ウェブ用 MediaPipe 顔検出機能のコードサンプルを使用して、MediaPipe 顔検出機能を自分で試してみてください。
オンデバイス ML を使用して独自のウェブアプリの機能を拡張することに関心がある場合は、次のリソースをご覧ください。