Tokopedia は、最大 e コマース マーケットプレイスを運営するインドネシアのテクノロジー企業で、40 を超えるデジタル商品と 1, 400 万以上の登録販売者をプラットフォームでホストしています。
Tokopedia のビジネスの一部である Mitra Tokopedia は、中小企業の経営者がクレジット カードやゲームのクーポン、データ パッケージ、電気トークン、国民医療請求書などのデジタル プロダクトを販売するのに役立つウェブ アプリケーションです。このウェブサイトは 700 を超える都市の Mitra Tokopedia の販売者にとって、主要なチャネルの一つであり、スムーズなユーザー エクスペリエンスを確保するうえで非常に重要です。
オンボーディング プロセスの重要なステップで、これらの販売者は本人確認を行う必要があります。販売者は、身分証明となる身分証明書と自撮り写真をアップロードし、販売者の確認を完了する必要があります。これは、顧客確認（KYC）プロセスと呼ばれます。
Mitra Tokopedia は、ウェブアプリ内のこの重要な KYC プロセスに機械学習機能を追加することで、認証の失敗を 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 によって適切にメンテナンスされているオープンソース パッケージであるため、ライセンスとメンテナンスのコストを節約できます。もう一つの考慮事項は推論のコストです。クライアント側で推論を実行できると、高価な GPU を使用してサーバー側で処理する場合と比較して、特にデータが無効で使用できないことが判明した場合に、大幅な費用を節約できます。
スケーラビリティ
また、モデルとテクノロジーのスケーラビリティも考慮しました。プロジェクトの進化に伴うデータの増加とモデルの複雑さに対処できるか。他のプロジェクトやユースケースに対応するために拡張できますか？モデルを CDN でホストしてクライアント側に配信できるため、非常にスケーラブルであるため、デバイス上の処理が役立ちます。
パフォーマンス
ライブラリのサイズ（KB）とランタイム プロセスのレイテンシを考慮しました。Mitra Tokopedia のユーザーベースの大半は、中程度のインターネット速度と接続を備えたミドルエンドからローエンドのデバイスを使用しています。したがって、特定のニーズに対応し、優れたユーザー エクスペリエンスを実現するには、ダウンロードと実行時間（つまり、モデルが出力を生成できる速度）に関するパフォーマンスが最優先事項となります。
その他の考慮事項
法規制の遵守: 選択するライブラリが、関連するデータ保護とプライバシーに関する規制を遵守していることを確認する必要がありました。
スキルセット: チームの専門知識とスキルセットを評価しました。一部の ML フレームワークとライブラリでは、特定のプログラミング言語や特定の分野の専門知識が必要になる場合があります。これらの要因を考慮することで、ML プロジェクトに適したモデルを選択する際に、情報に基づいた決定を下しました。
選択したテクノロジー
これらの要素を考慮した結果、TensorFlow.js はニーズを満たしました。WebGL バックエンドを使用して、デバイス上で完全に動作し、デバイスの GPU を使用できます。デバイス上でモデルを実行すると、サーバーのレイテンシが短縮され、サーバーのコンピューティング費用が削減されるため、ユーザーへのフィードバックをより迅速に行うことができます。オンデバイス ML の詳細については、オンデバイス ML の利点と制限事項をご覧ください。
「TensorFlow.js は、ブラウザでクライアントサイドを実行できる JavaScript デベロッパーを対象とした、Google のオープンソースの機械学習ライブラリです。これは、WebGL、WebAssembly、WebGPU バックエンド オペレーターを包括的にサポートしており、ブラウザ内で高速に高速に使用できる、最も成熟した Web AI のオプションです。」- Adobe が TensorFlow.js で Web ML を使用して Photoshop for web を拡張した方法
技術的な実装
Mitra Tokopedia は、MediaPipe と TensorFlow の顔検出ライブラリ（リアルタイムの顔検出を実行するためのモデルを提供するパッケージ）を使用しました。具体的には、このソリューションには、tfjs ランタイムを実装する、このライブラリで提供されている MediaPipeFaceDetector-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'）を指定します。この記事の冒頭で述べたように、販売者の本人確認を完了するには、身分証明書と自撮り写真（身分証明書）をアップロードする必要があります。次に、モデルの出力を使用して、承認基準に照らしてチェックを行います。つまり、前述の 6 つのキーポイントが一致するかどうかが、有効な ID カードと自撮り画像と見なされるかどうかが確認されます。
確認に成功すると、関連する販売者情報がバックエンドに渡されます。確認が失敗した場合、失敗を示すメッセージと再試行のオプションが販売者に表示されます。情報がバックエンドに送信されることはありません。
ローエンド デバイスのパフォーマンスに関する考慮事項
このパッケージはわずか 24.8 KB（圧縮および gzip）であり、ダウンロード時間に大きく影響することはありません。ただし、非常にローエンドのデバイスでは、ランタイム処理に時間がかかります。2 つの画像を機械学習の顔検出モデルに渡す前に、デバイスの RAM と CPU をチェックするロジックが追加されました。
デバイスの RAM が 4 GB 超、ネットワーク接続が 4G 超、CPU が 6 コアを超える場合、顔確認のために画像がオンデバイス モデルに渡されます。これらの要件が満たされていない場合、オンデバイスモデルはスキップされ、古いデバイスに対応するためのハイブリッド アプローチを使用して検証のために画像がサーバーに直接送信されます。時間の経過とともに、ハードウェアの進化に伴い、より多くのデバイスがサーバーからコンピューティングをオフロードできるようになります。
影響
ML の統合により、Tokopedia は高い拒否率の解決に成功し、次の結果が得られました。
- 拒否率が 20% 以上低下しました。
- 手動での承認の数は約 70% 減少しました。
これにより、販売者のユーザー エクスペリエンスが円滑になっただけでなく、Tokopedia チームの運用コストも削減されました。
おわりに
全体として、このケーススタディの結果から、適切なユースケースの場合、ウェブ上のオンデバイス ML ソリューションが、機能のユーザー エクスペリエンスと有効性の向上、費用削減やその他のビジネス上のメリットの向上に役立つことがわかりました。
MediaPipe Studio と MediaPipe Face Detector for web のコードサンプルを使用して、MediaPipe 顔検出機能を自分で試す。
オンデバイス ML を使用して独自のウェブアプリの機能を拡張することにご関心がある場合は、次のリソースをご覧ください。